--- title: Breadcrumb description: Displays the path to the current resource using a hierarchy of links. icon: navigation author: name: shadcn url: https://github.com/shadcn search: keywords: [breadcrumbs, path] mode: wide --- ### Installation ```package-install npx shadcn@latest add @redpanda/breadcrumb ``` ## Usage ```tsx import { Breadcrumb, BreadcrumbHeader, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/components/ui/breadcrumb'; ``` ```tsx Home Components Breadcrumb ``` ## When to use Use Breadcrumb to help users understand their current location within a site hierarchy and navigate back to parent levels: ```mermaid graph TD; A[❓ Need navigation context?] --> B{Site has deep hierarchy?}; B -->|Yes, 3+ levels| C[✅ Use Breadcrumb]; B -->|No, 1-2 levels| D[⚠️ Consider simpler navigation]; E{User might get lost?} -->|Yes| C; F{Content is categorized?} -->|Yes| C; G{Users need to backtrack?} -->|Yes| C; H{Mobile-first design?} -->|Yes| I[✅ Use responsive Breadcrumb with ellipsis]; H -->|No| J[✅ Use standard Breadcrumb]; K{Page is landing/home?} -->|Yes| L[⚠️ Don't use Breadcrumb]; K -->|No| C; classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000; classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000; classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff; classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff; class C,I,J recommended; class D,L discouraged; class A,B,E,F,G,H,K decision; ``` **Use Breadcrumb when:** - Site has 3 or more hierarchical levels - Users need to understand their current location - Content is organized in clear categories - Users frequently navigate between levels - Building e-commerce or documentation sites **Don't use Breadcrumb when:** - Site has flat structure (1-2 levels) - Navigation path is not hierarchical - Current page is the home/landing page - Users rarely need to backtrack - Primary navigation is sufficient ## Anatomy The Breadcrumb component creates a horizontal navigation trail with clear hierarchy: ``` Breadcrumb Container ┌─────────────────────────────────────────────────────────────┐ │ BreadcrumbList (nav element) │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ BreadcrumbItem → BreadcrumbSeparator → BreadcrumbItem │ │ │ │ ┌─────────────┐ ┌───────────────┐ ┌───────────────┐ │ │ │ │ │BreadcrumbLink│ │ ChevronRight │ │BreadcrumbPage │ │ │ │ │ │ (clickable) │ │ (separator) │ │ (current page)│ │ │ │ │ └─────────────┘ └───────────────┘ └───────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ Advanced Patterns: - BreadcrumbEllipsis for collapsed long paths - DropdownMenu integration for category navigation - Responsive with Drawer on mobile ``` **Component Hierarchy:** 1. **Breadcrumb** (Root): Main navigation wrapper with semantic meaning 2. **BreadcrumbHeader**: Optional header wrapper for layout and spacing 3. **BreadcrumbList**: Ordered list container for screen readers 4. **BreadcrumbItem**: Individual breadcrumb step wrapper 5. **BreadcrumbLink**: Clickable navigation link (for parent pages) 6. **BreadcrumbPage**: Current page indicator (non-clickable) 7. **BreadcrumbSeparator**: Visual divider between items 8. **BreadcrumbEllipsis**: Collapsed state for long breadcrumbs **Key Features:** - **Semantic HTML**: Uses `

` and `

` to create a custom separator. ```tsx lineNumbers {1,10-12} import { Slash } from "lucide-react" ... Home Components ``` --- ### Dropdown You can compose `` with a `` to create a dropdown in the breadcrumb. ```tsx lineNumbers {1-6,11-21} import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" ... Components Documentation Themes GitHub ``` --- ### Collapsed We provide a `` component to show a collapsed state when the breadcrumb is too long. ```tsx lineNumbers {1,9} import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb" ... {/* ... */} {/* ... */} ``` --- ### Link component Use the `render` prop on `` to supply a custom anchor or a routing library's link component. Custom components must forward native anchor props and refs. The supplied element can own its children. ```tsx Home} /> {/* ... */} ``` --- ### Card component You can wrap the breadcrumbs in a Card component to make them stand out more. ```tsx lineNumbers {1-2, 20-21} Components Breadcrumb ``` --- ### Responsive Here's an example of a responsive breadcrumb that composes `` with ``, ``, and ``. It displays a dropdown on desktop and a drawer on mobile. Labels remain readable in full and wrap onto another row when needed, rather than being capped and truncated. Desktop menu destinations use `DropdownMenuLinkItem` so keyboard selection follows the native link. --- ### Header wrapper Use the `` component to wrap your breadcrumb in a header with consistent layout and spacing. This is particularly useful when integrating breadcrumbs into layouts with collapsible sidebars. ```tsx lineNumbers {1,5,20} import { BreadcrumbHeader } from "@/components/ui/breadcrumb" ... Home Components Breadcrumb ``` The header wrapper provides: - Fixed height (64px) with responsive behavior for collapsible sidebars (48px) - Flexbox layout with consistent gap spacing - Smooth width and height transitions --- ### Leading icons Compose an icon and text inside `BreadcrumbLink` or `BreadcrumbPage`. Both parts own their icon alignment and spacing; do not repeat flex or gap classes on them. Size the icon itself as needed. ```tsx Topics ``` --- ### Loading state --- ### Copy resource ID ## Credits - We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/breadcrumb) for the breadcrumb style.