- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
Breadcrumb
Navigation breadcrumb with BreadcrumbList size prop, CaretRight separator, DotsThree ellipsis for collapsed items, and dropdown support for overflow scenarios.
Figma: DS-001 Foundations ยท 296:5212
Import
Live Demo
Breadcrumb navigation with different configurations.
BreadcrumbItem variants (Figma 195:1993)
| Variant | Default | Hover |
|---|---|---|
| Link | Breadcrumb | Breadcrumb |
| Link Current | Breadcrumb | Breadcrumb |
| Dropdown | Components | Components |
| Ellipsis | More | More |
Basic (Size=md)
Size=sm
With ellipsis + dropdown
Custom separator (slash)
With Next.js Link
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | "md" | "sm" | "md" | Size of the breadcrumb list |
Examples
Basic Breadcrumb
With Ellipsis
Show ellipsis for collapsed path segments.