Breadcrumb
shadcn/ui
Hierarchy navigation trail. Shows where the user is in the app structure.
@/components/ui/breadcrumbPatterns
| Pattern | Preview |
|---|---|
| Simple (2–3 levels) | |
| With ellipsis (deep path) | |
| Custom separator (chevron) |
Item states
| Item type | Preview | Token |
|---|---|---|
| Ancestor link | text-muted-foreground hover:text-foreground transition-colors | |
| Current page | text-foreground — no hover, aria-current="page" | |
| Separator | text-muted-foreground — default "/" from Lucide Slash |
In context — ticket detail header
Sticky top bar — breadcrumb shows the full path to the current ticket
Sub-components
| Component | Role |
|---|---|
| Breadcrumb | Root nav element — renders as <nav aria-label="breadcrumb"> |
| BreadcrumbList | Ordered list wrapper — horizontal flex row with gap and text-sm |
| BreadcrumbItem | Single item in the trail — wraps link or page |
| BreadcrumbLink | Clickable ancestor — text-muted-foreground, hover:text-foreground |
| BreadcrumbPage | Current page label — text-foreground, non-clickable, aria-current="page" |
| BreadcrumbSeparator | Divider between items — default: / (Slash icon). Pass children to customize. |
| BreadcrumbEllipsis | Collapsed middle items indicator — ··· icon |
On this page