Breadcrumb
A breadcrumb navigation component with glass styling, multiple separator styles, size variants, and automatic truncation with dropdown.
Installation
$ npx shadcn@latest add @orecus/breadcrumbDependencies:
lucide-react
Registry:
@orecus/color-utilsdropdown-menu
Component
Navigation breadcrumbs with icons, separators, and truncation support.
Basic
With Icons
Separator Styles
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | BreadcrumbItem[] | — | Array of breadcrumb items with label, href, and optional icon |
variant | 'normal' | 'subtle' | 'none' | 'none' | Glass effect variant |
invert | boolean | false | Invert glass overlay |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
radius | 'none' | 'sm' | 'default' | 'lg' | 'full' | 'default' | Container border radius |
separator | 'slash' | 'chevron' | 'arrow' | 'dot' | 'chevron' | Separator style between items |
maxItems | number | — | Max visible items (truncates middle with dropdown) |
itemClassName | string | — | Additional classes for each breadcrumb item |