From 4538d4e227f675ba14497b9b0ca3379d2e5fbda0 Mon Sep 17 00:00:00 2001
From: KavanBhavsar35 <kvbhavsar35@gmail.com>
Date: Mon, 12 May 2025 16:20:12 +0530
Subject: [PATCH 1/2] feat: added breadcrumb component

---
 components/retroui/Breadcrumb.tsx             | 120 ++++++++++++++++++
 components/retroui/index.ts                   |   1 +
 config/components.ts                          |  32 +++++
 config/navigation.ts                          |   1 +
 content/docs/components/breadcrumb.mdx        |  68 ++++++++++
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  19 +++
 .../breadcrumb-custom-separator.tsx           |  26 ++++
 .../components/breadcrumb-link-component.tsx  |  27 ++++
 .../components/breadcrumb-style-collapsed.tsx |  30 +++++
 .../components/breadcrumb-style-default.tsx   |  21 +++
 11 files changed, 346 insertions(+)
 create mode 100644 components/retroui/Breadcrumb.tsx
 create mode 100644 content/docs/components/breadcrumb.mdx
 create mode 100644 preview/components/breadcrumb-custom-separator.tsx
 create mode 100644 preview/components/breadcrumb-link-component.tsx
 create mode 100644 preview/components/breadcrumb-style-collapsed.tsx
 create mode 100644 preview/components/breadcrumb-style-default.tsx

diff --git a/components/retroui/Breadcrumb.tsx b/components/retroui/Breadcrumb.tsx
new file mode 100644
index 0000000..3418f06
--- /dev/null
+++ b/components/retroui/Breadcrumb.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const BreadcrumbRoot = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ className, ...props }, ref) => (
+  <nav
+    ref={ref}
+    aria-label="breadcrumb"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+BreadcrumbRoot.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 sm:gap-2.5 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("inline-flex items-center", className)} {...props} />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "font-medium transition-colors hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring rounded-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("text-foreground font-semibold", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
+
+const Breadcrumb = Object.assign(BreadcrumbRoot, {
+  List: BreadcrumbList,
+  Item: BreadcrumbItem,
+  Link: BreadcrumbLink,
+  Page: BreadcrumbPage,
+  Separator: BreadcrumbSeparator,
+  Ellipsis: BreadcrumbEllipsis,
+})
+
+export { Breadcrumb }
+
+
diff --git a/components/retroui/index.ts b/components/retroui/index.ts
index 63ebfae..c1592b9 100644
--- a/components/retroui/index.ts
+++ b/components/retroui/index.ts
@@ -22,3 +22,4 @@ export * from "./Toggle";
 export * from "./ToggleGroup";
 export * from "./Sonner";
 export * from "./Tooltip";
+export * from "./Breadcrumb";
\ No newline at end of file
diff --git a/config/components.ts b/config/components.ts
index df92a48..8168a3d 100644
--- a/config/components.ts
+++ b/config/components.ts
@@ -108,6 +108,10 @@ export const componentConfig: {
       name: "tooltip",
       filePath: "components/retroui/Tooltip.tsx",
     },
+    breadcrumb: {
+      name: "breadcrumb",
+      filePath: "components/retroui/Breadcrumb.tsx",
+    }
   },
   examples: {
     "accordion-style-default": {
@@ -469,5 +473,33 @@ export const componentConfig: {
         () => import("@/preview/components/toggle-group-style-solid"),
       ),
     },
+    "breadcrumb-style-default": {
+      name: "breadcrumb-style-default",
+      filePath: "preview/components/breadcrumb-style-default.tsx",
+      preview: lazy(
+        () => import("@/preview/components/breadcrumb-style-default"),
+      ),
+    },
+    "breadcrumb-custom-separator": {
+      name: "breadcrumb-custom-separator",
+      filePath: "preview/components/breadcrumb-custom-separator.tsx",
+      preview: lazy(
+        () => import("@/preview/components/breadcrumb-custom-separator"),
+      ),
+    },
+    "breadcrumb-style-collapsed": {
+      name: "breadcrumb-style-collapsed",
+      filePath: "preview/components/breadcrumb-style-collapsed.tsx",
+      preview: lazy(
+        () => import("@/preview/components/breadcrumb-style-collapsed"),
+      ),
+    },
+    "breadcrumb-link-component": {
+      name: "breadcrumb-link-component",
+      filePath: "preview/components/breadcrumb-link-component.tsx",
+      preview: lazy(
+        () => import("@/preview/components/breadcrumb-link-component"),
+      ),
+    },
   },
 };
diff --git a/config/navigation.ts b/config/navigation.ts
index 59092bf..ebccb35 100644
--- a/config/navigation.ts
+++ b/config/navigation.ts
@@ -28,6 +28,7 @@ export const navConfig: INavigationConfig = {
         { title: "Alert", href: `${componentsRoute}/alert` },
         { title: "Avatar", href: `${componentsRoute}/avatar` },
         { title: "Badge", href: `${componentsRoute}/badge` },
+        { title: "Breadcrumb", href: `${componentsRoute}/breadcrumb` },
         { title: "Button", href: `${componentsRoute}/button` },
         { title: "Card", href: `${componentsRoute}/card` },
         { title: "Checkbox", href: `${componentsRoute}/checkbox` },
diff --git a/content/docs/components/breadcrumb.mdx b/content/docs/components/breadcrumb.mdx
new file mode 100644
index 0000000..94b43f6
--- /dev/null
+++ b/content/docs/components/breadcrumb.mdx
@@ -0,0 +1,68 @@
+---
+title: Breadcrumb
+description: A navigation component that shows users where they are within a hierarchy.
+lastUpdated: 12 May, 2025
+---
+
+<ComponentShowcase name="breadcrumb-style-default" />
+<br />
+<br />
+
+<ComponentInstall>
+  <ComponentInstall.Cli>
+    ```sh
+npx shadcn@latest add "https://retroui.dev/r/badge.json"
+    ```
+  </ComponentInstall.Cli>
+  <ComponentInstall.Manual>
+#### 1. Install dependencies:
+
+```sh
+npm install lucide-react class-variance-authority
+````
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="breadcrumb" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<hr />
+<br />
+<ComponentShowcase name="breadcrumb-style-default" />
+<br />
+<br />
+
+### Custom Separator
+
+<hr />
+<br />
+<ComponentShowcase name="breadcrumb-custom-separator" />
+<br />
+<br />
+
+### Collapsed
+
+<hr />
+<br />
+<ComponentShowcase name="breadcrumb-style-collapsed" />
+<br />
+<br />
+
+### Link Component
+
+<hr />
+<br />
+<ComponentShowcase name="breadcrumb-link-component" />
+<br />
+<br />
\ No newline at end of file
diff --git a/package.json b/package.json
index 60a7205..af4312b 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slider": "^1.2.4",
+    "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-toggle": "^1.1.6",
     "@radix-ui/react-toggle-group": "^1.1.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5fa3acc..7a9e8ba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@radix-ui/react-slider':
         specifier: ^1.2.4
         version: 1.2.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.2
+        version: 1.2.2(@types/react@18.0.0)(react@18.0.0)
       '@radix-ui/react-switch':
         specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -1547,6 +1550,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.2.2':
+    resolution: {integrity: sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-switch@1.1.3':
     resolution: {integrity: sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==}
     peerDependencies:
@@ -5934,6 +5946,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-slot@1.2.2(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
   '@radix-ui/react-switch@1.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
diff --git a/preview/components/breadcrumb-custom-separator.tsx b/preview/components/breadcrumb-custom-separator.tsx
new file mode 100644
index 0000000..a8bc6d6
--- /dev/null
+++ b/preview/components/breadcrumb-custom-separator.tsx
@@ -0,0 +1,26 @@
+import { Breadcrumb } from "@/components/retroui/Breadcrumb";
+import { Slash } from "lucide-react";
+
+export default function BreadcrumbCustomSeparator() {
+  return (
+    <Breadcrumb>
+      <Breadcrumb.List>
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator>
+          <Slash />
+        </Breadcrumb.Separator>
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator>
+          <Slash />
+        </Breadcrumb.Separator>
+        <Breadcrumb.Item>
+          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+        </Breadcrumb.Item>
+      </Breadcrumb.List>
+    </Breadcrumb>
+  );
+}
diff --git a/preview/components/breadcrumb-link-component.tsx b/preview/components/breadcrumb-link-component.tsx
new file mode 100644
index 0000000..bebd443
--- /dev/null
+++ b/preview/components/breadcrumb-link-component.tsx
@@ -0,0 +1,27 @@
+import Link from "next/link"
+
+import { Breadcrumb } from "@/components/retroui/Breadcrumb"
+
+export default function BreadcrumbLinkComponent() {
+  return (
+    <Breadcrumb>
+      <Breadcrumb.List>
+        <Breadcrumb.Item>
+          <Breadcrumb.Link asChild>
+            <Link href="/">Home</Link>
+          </Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Link asChild>
+            <Link href="/docs/components">Components</Link>
+          </Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+        </Breadcrumb.Item>
+      </Breadcrumb.List>
+    </Breadcrumb>
+  )
+}
diff --git a/preview/components/breadcrumb-style-collapsed.tsx b/preview/components/breadcrumb-style-collapsed.tsx
new file mode 100644
index 0000000..2fb3e35
--- /dev/null
+++ b/preview/components/breadcrumb-style-collapsed.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link"
+
+import { Breadcrumb } from "@/components/retroui/Breadcrumb";
+
+export default function BreadcrumbCollapsed() {
+  return (
+    <Breadcrumb>
+      <Breadcrumb.List>
+        <Breadcrumb.Item>
+          <Breadcrumb.Link asChild>
+            <Link href="/">Home</Link>
+          </Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Item>
+          <Breadcrumb.Ellipsis />
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Link asChild>
+            <Link href="/docs/components">Components</Link>
+          </Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+        </Breadcrumb.Item>
+      </Breadcrumb.List>
+    </Breadcrumb>
+  )
+}
diff --git a/preview/components/breadcrumb-style-default.tsx b/preview/components/breadcrumb-style-default.tsx
new file mode 100644
index 0000000..dcbe8c5
--- /dev/null
+++ b/preview/components/breadcrumb-style-default.tsx
@@ -0,0 +1,21 @@
+import { Breadcrumb } from "@/components/retroui/Breadcrumb";
+
+export default function BreadcrumbStyleDefault() {
+  return (
+    <Breadcrumb>
+      <Breadcrumb.List>
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+        </Breadcrumb.Item>
+      </Breadcrumb.List>
+    </Breadcrumb>
+  );
+}

From a61ee863ab31c5420f4ba58afba6a5acae831a05 Mon Sep 17 00:00:00 2001
From: KavanBhavsar35 <kvbhavsar35@gmail.com>
Date: Mon, 12 May 2025 19:24:27 +0530
Subject: [PATCH 2/2] fix: correct installation command for breadcrumb
 component in documentation and fix aria bugs and props issues.

---
 components/retroui/Breadcrumb.tsx      | 7 +------
 content/docs/components/breadcrumb.mdx | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/components/retroui/Breadcrumb.tsx b/components/retroui/Breadcrumb.tsx
index 3418f06..213c49c 100644
--- a/components/retroui/Breadcrumb.tsx
+++ b/components/retroui/Breadcrumb.tsx
@@ -5,9 +5,7 @@ import { cn } from "@/lib/utils"
 
 const BreadcrumbRoot = React.forwardRef<
   HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
+  React.ComponentPropsWithoutRef<"nav">
 >(({ className, ...props }, ref) => (
   <nav
     ref={ref}
@@ -65,8 +63,6 @@ const BreadcrumbPage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <span
     ref={ref}
-    role="link"
-    aria-disabled="true"
     aria-current="page"
     className={cn("text-foreground font-semibold", className)}
     {...props}
@@ -96,7 +92,6 @@ const BreadcrumbEllipsis = ({
 }: React.ComponentProps<"span">) => (
   <span
     role="presentation"
-    aria-hidden="true"
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
diff --git a/content/docs/components/breadcrumb.mdx b/content/docs/components/breadcrumb.mdx
index 94b43f6..7b9feb1 100644
--- a/content/docs/components/breadcrumb.mdx
+++ b/content/docs/components/breadcrumb.mdx
@@ -11,7 +11,7 @@ lastUpdated: 12 May, 2025
 <ComponentInstall>
   <ComponentInstall.Cli>
     ```sh
-npx shadcn@latest add "https://retroui.dev/r/badge.json"
+npx shadcn@latest add "https://retroui.dev/r/breadcrumb.json"
     ```
   </ComponentInstall.Cli>
   <ComponentInstall.Manual>