Breadcrumb (unified)
Displays a hierarchy of links to the current page or resource in an application.
Installation
pnpm dlx shadcn@latest add @toui/breadcrumb
Examples
Icon
Separator
Dropdown
Card
API Reference
This component provides a customizable breadcrumb system for displaying a hierarchy of links.
Breadcrumb
This component is a flexible container for displaying breadcrumb items.
| Prop | Type | Default |
|---|---|---|
className | ||
separator | <ChevronRight/> |
BreadcrumbList
This component is used to display a list of breadcrumb items.
| Prop | Type | Default |
|---|---|---|
className |
BreadcrumbItem
This component is used to display an individual breadcrumb item.
| Prop | Type | Default |
|---|---|---|
className |
BreadcrumbLink
This component is used to display a link within a breadcrumb item.
| Prop | Type | Default |
|---|---|---|
className | ||
href | ||
asChild |
BreadcrumbPage
This component is used to display the current page in the breadcrumb.
| Prop | Type | Default |
|---|---|---|
className |
BreadcrumbSeparator
This component is used to display a separator between breadcrumb items.
| Prop | Type | Default |
|---|---|---|
className |
BreadcrumbEllipsis
This component is used to display an ellipsis in the breadcrumb.
| Prop | Type | Default |
|---|---|---|
className |
Credits
- Built with Radix UI Slot.