Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Installation
pnpm dlx cubix@latest add breadcrumbUsage
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/cubix/breadcrumb"<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Composition
Use the following composition to build a Breadcrumb:
Breadcrumb
└── BreadcrumbList
├── BreadcrumbItem
│ └── BreadcrumbLink
├── BreadcrumbSeparator
├── BreadcrumbItem
│ └── BreadcrumbLink
├── BreadcrumbSeparator
└── BreadcrumbItem
└── BreadcrumbPageExamples
Basic
A basic breadcrumb with a home link and a components link.
Custom separator
Pass a custom child to BreadcrumbSeparator to replace the default chevron.
Dropdown
Compose BreadcrumbEllipsis with a DropdownMenu when the path is too long.
Collapsed
Use BreadcrumbEllipsis to show a collapsed state when the breadcrumb is too long.
Link component
Use the render prop (Base UI / React Aria) or asChild (Radix) on BreadcrumbLink to use a custom link from your routing library.
RTL
To enable RTL support, see the Direction guide. The default chevron flips with dir="rtl".
API Reference
Note: Keep the last item as BreadcrumbPage so the current page is announced correctly.
Breadcrumb
The root navigation element that wraps all breadcrumb parts.
| Prop | Type | Default | Description |
|---|---|---|---|
| aria-label | string | "Breadcrumb" | Accessible name for the navigation landmark. |
| className | string | - | Additional Tailwind classes merged with the component styles (last one wins). |
| children | React.ReactNode | - | Usually a BreadcrumbList of items, separators, and the page. |
BreadcrumbList
The ordered list of breadcrumb items.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional Tailwind classes merged with the component styles (last one wins). |
BreadcrumbItem
Wraps an individual breadcrumb item.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional Tailwind classes merged with the component styles (last one wins). |
BreadcrumbLink
A clickable link in the breadcrumb.
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | - | Destination for the default anchor. Ignored when render is set. |
| render | React.ReactElement | - | Base UI / React Aria: render the link as another element, such as a Next.js Link. |
| asChild | boolean | - | Radix: merge props onto the child element instead of rendering an anchor. |
| className | string | - | Additional Tailwind classes merged with the component styles (last one wins). |
BreadcrumbPage
The current page in the breadcrumb. Not a link.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional Tailwind classes merged with the component styles (last one wins). |
| children | React.ReactNode | - | The current page label. Not a link. |
BreadcrumbSeparator
Separator between items. Pass children to override the default icon.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Custom separator. Defaults to a chevron when omitted. |
| className | string | - | Additional Tailwind classes merged with the component styles (last one wins). |
BreadcrumbEllipsis
An ellipsis indicator for collapsed breadcrumb items.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional Tailwind classes merged with the component styles (last one wins). |