diff --git a/packages/ui/components/breadcrumb/breadcrumb.test.tsx b/packages/ui/components/breadcrumb/breadcrumb.test.tsx
new file mode 100644
index 0000000000..0d9a8b4c8f
--- /dev/null
+++ b/packages/ui/components/breadcrumb/breadcrumb.test.tsx
@@ -0,0 +1,105 @@
+import { render, screen } from "@testing-library/react";
+
+import { Breadcrumb, BreadcrumbItem } from "./Breadcrumb";
+
+describe("Tests for Breadcrumb component", () => {
+  test("Should render correctly with no items", () => {
+    render(
+      <Breadcrumb>
+        <div>Dummy Child</div>
+      </Breadcrumb>
+    );
+
+    const breadcrumbNav = screen.getByRole("navigation");
+    expect(breadcrumbNav).toBeInTheDocument();
+
+    const separators = screen.queryAllByText("/");
+    expect(separators).toHaveLength(0);
+  });
+
+  test("Should render correctly with custom list props", () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbItem href="/" listProps={{ className: "custom-list" }}>
+          Home
+        </BreadcrumbItem>
+        <BreadcrumbItem href="/about" listProps={{ className: "custom-list" }}>
+          About
+        </BreadcrumbItem>
+        <BreadcrumbItem href="/contact" listProps={{ className: "custom-list" }}>
+          Contact
+        </BreadcrumbItem>
+      </Breadcrumb>
+    );
+
+    const customListItems = document.querySelectorAll(".custom-list");
+    expect(customListItems.length).toBe(3);
+  });
+
+  test("Should generate correct hrefs and labels", () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbItem href="/category">Category</BreadcrumbItem>
+        <BreadcrumbItem href="/category/item">Item</BreadcrumbItem>
+      </Breadcrumb>
+    );
+
+    const categoryLink = screen.getByText("Category");
+    const itemLink = screen.getByText("Item");
+
+    expect(categoryLink.getAttribute("href")).toBe("/category");
+    expect(itemLink.getAttribute("href")).toBe("/category/item");
+  });
+
+  test("Should /category be a anchor tag", async () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbItem href="/category">Category</BreadcrumbItem>
+        <BreadcrumbItem href="/category/item">Item</BreadcrumbItem>
+      </Breadcrumb>
+    );
+
+    const categoryLink = screen.getByText("Category");
+    const categoryAnchor = categoryLink.closest("a");
+    const categoryItem = categoryAnchor?.parentElement;
+
+    expect(categoryAnchor).toBeInTheDocument();
+    expect(categoryItem?.tagName).toBe("LI");
+    expect(categoryAnchor?.getAttribute("href")).toBe("/category");
+  });
+
+  test("Should not render separators when there is only one item", () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbItem href="/">Home</BreadcrumbItem>
+      </Breadcrumb>
+    );
+
+    const separators = screen.queryAllByText("/");
+    expect(separators).toHaveLength(0);
+  });
+
+  test("Should render breadcrumbs with correct order when rendered in reverse order", () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbItem href="/contact">Contact</BreadcrumbItem>
+        <BreadcrumbItem href="/about">About</BreadcrumbItem>
+        <BreadcrumbItem href="/">Home</BreadcrumbItem>
+      </Breadcrumb>
+    );
+
+    const breadcrumbList = screen.getByRole("list");
+    const breadcrumbItems = screen.getAllByRole("listitem");
+
+    expect(breadcrumbItems).toHaveLength(3);
+    expect(breadcrumbList).toContainElement(breadcrumbItems[2]);
+    expect(breadcrumbList).toContainElement(breadcrumbItems[1]);
+    expect(breadcrumbList).toContainElement(breadcrumbItems[0]);
+    expect(breadcrumbItems[2]).toHaveTextContent("Home");
+    expect(breadcrumbItems[1]).toHaveTextContent("About");
+    expect(breadcrumbItems[0]).toHaveTextContent("Contact");
+
+    const separators = screen.getAllByText("/");
+    expect(separators).toHaveLength(2);
+  });
+});