Breadcrumb
Navigation breadcrumbs with auto-separators and dot notation API.
Preview
Installation
npx drivn add breadcrumbUsage
1 import { Breadcrumb } from "@/components/ui/breadcrumb" 2 3 export default function Page() { 4 return ( 5 <Breadcrumb> 6 <Breadcrumb.Item href="/">Home</Breadcrumb.Item> 7 <Breadcrumb.Item href="/docs">Docs</Breadcrumb.Item> 8 <Breadcrumb.Page>Button</Breadcrumb.Page> 9 </Breadcrumb> 10 ) 11 }
Custom Separator
Override the default chevron separator.
With Ellipsis
Truncate long paths with an ellipsis indicator.
API Reference
Breadcrumb
| Prop | Type | Default | Description |
|---|---|---|---|
separator | ReactNode | — | Custom separator element between items. Defaults to a chevron icon. |
className | string | — | Additional CSS classes for the list. |
children | ReactNode | — | Breadcrumb.Item, Breadcrumb.Page, and Breadcrumb.Ellipsis sub-components. |
Breadcrumb.Item
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | Navigation URL for this breadcrumb link. |
className | string | — | Additional CSS classes to apply. |
children | ReactNode | — | Link label content. |
Breadcrumb.Page
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply. |
children | ReactNode | — | Current page label. |
Breadcrumb.Separator
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Custom separator content. Defaults to a ChevronRight icon. |
Breadcrumb.Ellipsis
| Prop | Type | Default | Description |
|---|---|---|---|
— | — | — | No props. Renders a MoreHorizontal icon with screen reader text. |