diff --git a/components/retroui/Breadcrumb.tsx b/components/retroui/Breadcrumb.tsx
new file mode 100644
index 0000000..213c49c
--- /dev/null
+++ b/components/retroui/Breadcrumb.tsx
@@ -0,0 +1,115 @@
+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">
+>(({ className, ...props }, ref) => (
+
+))
+BreadcrumbRoot.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+ HTMLOListElement,
+ React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+ HTMLLIElement,
+ React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+ HTMLAnchorElement,
+ React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean }
+>(({ asChild, className, ...props }, ref) => {
+ const Comp = asChild ? Slot : "a"
+ return (
+
+ )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+ HTMLSpanElement,
+ React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+ children,
+ className,
+ ...props
+}: React.ComponentProps<"li">) => (
+ svg]:h-4 [&>svg]:w-4", className)}
+ {...props}
+ >
+ {children ?? }
+
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+ className,
+ ...props
+}: React.ComponentProps<"span">) => (
+
+
+ More
+
+)
+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..7b9feb1
--- /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
+---
+
+
+
+
+
+
+
+ ```sh
+npx shadcn@latest add "https://retroui.dev/r/breadcrumb.json"
+ ```
+
+
+#### 1. Install dependencies:
+
+```sh
+npm install lucide-react class-variance-authority
+````
+
+
+
+#### 2. Copy the code 👇 into your project:
+
+
+
+
+
+
+
+
+
+## Examples
+
+### Default
+
+
+
+
+
+
+
+### Custom Separator
+
+
+
+
+
+
+
+### Collapsed
+
+
+
+
+
+
+
+### Link Component
+
+
+
+
+
+
\ 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 (
+
+
+
+ Home
+
+
+
+
+
+ Components
+
+
+
+
+
+ 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 (
+
+
+
+
+ Home
+
+
+
+
+
+ Components
+
+
+
+
+ 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 (
+
+
+
+
+ Home
+
+
+
+
+
+
+
+
+ Components
+
+
+
+
+ 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 (
+
+
+
+ Home
+
+
+
+ Components
+
+
+
+ Breadcrumb
+
+
+
+ );
+}