Breadcrumb
Displays the current page location within a navigational hierarchy.
Installation
pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/breadcrumb.jsonDefault
Standard breadcrumb with link items and a current page item.
Custom Separator
Use a custom separator character instead of the default icon.
Collapsed Path
Display long hierarchies using BreadcrumbEllipsis.
Multi-Line Labels
Breadcrumb labels support wrapping for long text values.
AsChild Link
Use asChild to render breadcrumb links with custom elements.
Props
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
Breadcrumb | ...props | React.ComponentProps<"nav"> | — | Root nav wrapper (aria-label="breadcrumb") |
BreadcrumbList | className | string | — | Styles the ordered list layout |
BreadcrumbItem | className | string | — | Styles each list item |
BreadcrumbLink | asChild | boolean | false | Renders link as child element |
BreadcrumbPage | className | string | — | Current page label |
BreadcrumbSeparator | children | ReactNode | arrow icon | Custom separator content |
BreadcrumbEllipsis | className | string | — | Collapsed indicator for long paths |