Breadcrumbs
Renders an ordered breadcrumb trail inside a <nav aria-label="Breadcrumb">. The last item is always rendered as a plain <span> with aria-current="page"; earlier items with an href render as <a> links.
Default (/ separator)
<Breadcrumbs
items={[
{ label: 'Home', href: '/' },
{ label: 'Components', href: '/components' },
{ label: 'Breadcrumbs' },
]}
/>Custom separator
<Breadcrumbs
separator="›"
items={[
{ label: 'Docs', href: '/docs' },
{ label: 'UI', href: '/docs/ui' },
{ label: 'Breadcrumbs' },
]}
/>Single-level (no links)
<Breadcrumbs items={[{ label: 'Current Page' }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | — | Ordered path segments (required). Each item has label and optional href |
separator | string | '/' | Content rendered between items |
class | string | — | Additional CSS class names on the root <nav> |
style | object | — | Inline styles on the root <nav> |