Default
With Ellipsis
Custom Separator
With Next.js Link
Sub-components
| Sub-component | Type | Description |
|---|---|---|
| Breadcrumb | nav | Root navigation element with aria-label. |
| Breadcrumb.List | ol | Ordered list wrapping breadcrumb items. |
| Breadcrumb.Item | li | Individual breadcrumb entry. |
| Breadcrumb.Link | a | Slot | Clickable link. Supports asChild for custom components. |
| Breadcrumb.Page | span | Current page indicator (aria-current='page'). |
| Breadcrumb.Separator | li | Visual separator. Defaults to ChevronRight icon. |
| Breadcrumb.Ellipsis | span | Ellipsis indicator for collapsed breadcrumbs. |
Usage
<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Current Page</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
{/* With Next.js Link */}
<Breadcrumb.Link asChild>
<Link href="/path">Label</Link>
</Breadcrumb.Link>
{/* Custom separator */}
<Breadcrumb.Separator>/</Breadcrumb.Separator>