Breadcrumb
Hierarchical navigation trail with current-page state.
Add it to your project
Eject the complete breadcrumb group, then import from its generated local barrel. The copied source and CSS belong to your application.
pnpm exec toucan eject breadcrumbnpx toucan eject breadcrumbimport { Breadcrumb, BreadcrumbItem } from '@/components/toucan/breadcrumb';Use when
Users need context and shortcuts within a multi-level information hierarchy.
Avoid when
The product has a flat structure or the trail would only contain one item.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Breadcrumb
Props type: BreadcrumbProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | 'Breadcrumb' | No | Accessible label for the navigation landmark. Defaults to "Breadcrumb". |
separator | React.ReactNode | '/' | No | Custom separator rendered between items. Defaults to "/". |
Also accepts the native HTML element attributes that are not replaced by a Toucan prop.
BreadcrumbItem
Props type: BreadcrumbItemProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
href | string | undefined | No | When provided, wraps children in an anchor element. |
isCurrent | boolean | false | No | Marks this item as the current page. Sets aria-current="page". |
Also accepts the native list item attributes that are not replaced by a Toucan prop.
Type exports
BreadcrumbItemProps, BreadcrumbProps
Accessibility
- Uses a labelled navigation landmark and marks the current page.
Token families
breadcrumb