Components
Breadcrumb
Displays a hierarchy of links to the current page or resource in an application.
Loading
Installation
pnpm dlx shadcn@latest add @toui/breadcrumb
Examples
Icon
Loading
Separator
Loading
Dropdown
Loading
Card
Loading
Pattern
Tokens
3 CSS variables in 3 categories.
text
| CSS Variable | Value | Description |
|---|---|---|
--breadcrumb-text | var(--component-text-sm) | — |
separator-size
| CSS Variable | Value | Description |
|---|---|---|
--breadcrumb-separator-size | 0.875rem | 14px — separator icon size |
gap
| CSS Variable | Value | Description |
|---|---|---|
--breadcrumb-gap | var(--component-gap-sm) | — |
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.