Component
Breadcrumbs
A breadcrumb navigation trail. Auto-generated from pathname or manually specified items. Uses the headless @refraction-ui/breadcrumbs core.
Examples
Auto-generated, custom labels, and manual breadcrumbs.
Auto-generated from path
With custom labels
Manual items
Installation
$
pnpm add @refraction-ui/react-breadcrumbsUsage
tsx
import { Breadcrumbs } from '@refraction-ui/react-breadcrumbs'
export function MyComponent() {
return <Breadcrumbs pathname="/docs/components/button" />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
pathname | string | -- | Auto-generate breadcrumbs from this pathname. |
items | BreadcrumbItem[] | -- | Manual breadcrumb items (overrides pathname). |
labels | Record<string, string> | -- | Custom label map for pathname segments. |
separator | string | '/' | Separator character between items. |
maxItems | number | -- | Max items before truncation. |
className | string | -- | Additional CSS classes. |