diff --git a/src/components/breadcrumb-navigation/breadcrumb-navigation-arrow.tsx b/src/components/breadcrumb-navigation/breadcrumb-navigation-arrow.tsx
new file mode 100644
index 00000000..8ce02107
--- /dev/null
+++ b/src/components/breadcrumb-navigation/breadcrumb-navigation-arrow.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import { ChevronRightIcon } from "../../icons";
+
+export const BreadcrumbNavigationArrow = () => {
+ return ;
+};
diff --git a/src/components/breadcrumb-navigation/breadcrumb-navigation-item.tsx b/src/components/breadcrumb-navigation/breadcrumb-navigation-item.tsx
new file mode 100644
index 00000000..3bb91698
--- /dev/null
+++ b/src/components/breadcrumb-navigation/breadcrumb-navigation-item.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+import { AsChildProps, Slot } from "../slot/slot";
+
+type BreadcrumbNavigationItemProps = AsChildProps> & {
+ isActive?: boolean;
+};
+
+export const BreadcrumbNavigationItem: React.FC = ({
+ isActive,
+ asChild,
+ ...props
+}) => {
+ const Comp = asChild ? Slot : "a";
+
+ return (
+
+ );
+};
diff --git a/src/components/breadcrumb-navigation/breadcrumb-navigation.stories.tsx b/src/components/breadcrumb-navigation/breadcrumb-navigation.stories.tsx
new file mode 100644
index 00000000..6f5bd975
--- /dev/null
+++ b/src/components/breadcrumb-navigation/breadcrumb-navigation.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { BreadcrumbNavigation } from "./breadcrumb-navigation";
+
+const meta: Meta = {
+ title: "Breadcrumb Navigation",
+ component: BreadcrumbNavigation,
+ args: {},
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Base: Story = {
+ render: () => (
+
+
+ Home
+
+
+
+ Library
+
+
+
+
+ Book
+
+
+
+ ),
+};
diff --git a/src/components/breadcrumb-navigation/breadcrumb-navigation.tsx b/src/components/breadcrumb-navigation/breadcrumb-navigation.tsx
new file mode 100644
index 00000000..bc25258d
--- /dev/null
+++ b/src/components/breadcrumb-navigation/breadcrumb-navigation.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { BreadcrumbNavigationItem } from "./breadcrumb-navigation-item";
+import { BreadcrumbNavigationArrow } from "./breadcrumb-navigation-arrow";
+
+export interface BreadcrumbNavigationProps {
+ children: React.ReactNode;
+}
+
+const BreadcrumbNavigation = ({ children }: BreadcrumbNavigationProps) => {
+ return ;
+};
+
+BreadcrumbNavigation.Item = BreadcrumbNavigationItem;
+BreadcrumbNavigation.Arrow = BreadcrumbNavigationArrow;
+
+export { BreadcrumbNavigation };
diff --git a/src/components/breadcrumb-navigation/index.tsx b/src/components/breadcrumb-navigation/index.tsx
new file mode 100644
index 00000000..40689950
--- /dev/null
+++ b/src/components/breadcrumb-navigation/index.tsx
@@ -0,0 +1 @@
+export { BreadcrumbNavigation } from "./breadcrumb-navigation";
diff --git a/src/components/index.ts b/src/components/index.ts
index d481b0e7..8e9a2565 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 { BreadcrumbNavigation } from "./breadcrumb-navigation";
export { Button } from "./button";
export { Checkbox } from "./checkbox";
export { Dialog } from "./dialog";