║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Breadcrumb description: A navigation component that shows users where they are within a hierarchy. lastUpdated: 12 May, 2025 links: source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Breadcrumb.tsx

<ComponentShowcase name="breadcrumb-style-default" /> <br /> <br /> <ComponentInstall> <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/breadcrumb" /> <ComponentInstall.Manual> #### 1. Install dependencies:

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 />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║