diff --git a/src/components/breadcrumb/breadcrumb-arrow.tsx b/src/components/breadcrumb/breadcrumb-arrow.tsx
new file mode 100644
index 00000000..f2496fd4
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-arrow.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import { ChevronRightIcon } from "../../icons";
+
+export const BreadcrumbArrow = () => {
+    return <ChevronRightIcon className="h-3 w-3 text-neutral-800" />;
+};
diff --git a/src/components/breadcrumb/breadcrumb-item.tsx b/src/components/breadcrumb/breadcrumb-item.tsx
new file mode 100644
index 00000000..8fbfb284
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-item.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+
+interface BreadcrumbItemProps {
+    children: React.ReactNode;
+    className?: string;
+    href?: string;
+    active?: boolean;
+}
+
+export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+    children,
+    className,
+    href,
+    active,
+}) => {
+    return (
+        <a
+            className={classNames(
+                "headline-500 text-neutral-800",
+                !active && "cursor-pointer underline-offset-2 hover:underline",
+                active && "text-black",
+                className
+            )}
+            href={href}
+        >
+            {children}
+        </a>
+    );
+};
diff --git a/src/components/breadcrumb/breadcrumb.stories.tsx b/src/components/breadcrumb/breadcrumb.stories.tsx
new file mode 100644
index 00000000..8f3d038b
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Breadcrumb } from "./breadcrumb";
+
+const meta: Meta<typeof Breadcrumb> = {
+    title: "Breadcrumb",
+    component: Breadcrumb,
+    args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Base: Story = {
+    render: () => (
+        <div className="p-4">
+            <Breadcrumb>
+                <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+
+                <Breadcrumb.Arrow />
+
+                <Breadcrumb.Item href="/">Library</Breadcrumb.Item>
+
+                <Breadcrumb.Arrow />
+
+                <Breadcrumb.Item href="/" active>
+                    Book
+                </Breadcrumb.Item>
+            </Breadcrumb>
+        </div>
+    ),
+};
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
new file mode 100644
index 00000000..f493f324
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { BreadcrumbItem } from "./breadcrumb-item";
+import { BreadcrumbArrow } from "./breadcrumb-arrow";
+
+export interface BreadcrumbProps {
+    children: React.ReactNode;
+}
+
+const Breadcrumb = ({ children }: BreadcrumbProps) => {
+    return (
+        <nav className="flex flex-row items-center justify-center gap-1" role="navigation">
+            {children}
+        </nav>
+    );
+};
+
+Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Arrow = BreadcrumbArrow;
+
+export { Breadcrumb };
diff --git a/src/components/breadcrumb/index.tsx b/src/components/breadcrumb/index.tsx
new file mode 100644
index 00000000..69b4a5ce
--- /dev/null
+++ b/src/components/breadcrumb/index.tsx
@@ -0,0 +1 @@
+export { Breadcrumb } from "./breadcrumb";
diff --git a/src/components/index.ts b/src/components/index.ts
index 5e57f0a5..a43ee6e3 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,7 @@
 export { Alert, AlertIntent } from "./alert";
 export { Avatar } from "./avatar";
 export { Badge, BadgeType } from "./badge";
+export { Breadcrumb } from "./breadcrumb";
 export { Button } from "./button";
 export { Checkbox } from "./checkbox";
 export { Dialog } from "./dialog";