KQ-199 · BREADCRUMB/TRAIL
Breadcrumb Trail
A breadcrumb whose separators draw themselves in as a connected trail. When the path outgrows its width the middle folds into an ellipsis that expands the hidden crumbs back in on click, and the last crumb is marked as the current page.
KQ-199 · BREADCRUMB/TRAIL
Went to —
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/breadcrumb-trail
Props
- items
- Crumb[]
- default —
- The path — id, label, optional href.
- maxVisible
- number
- default —
- Crumbs shown before the middle collapses into an ellipsis.
- onNavigate
- (crumb) => void
- default —
- Called on activation; prevents default navigation when set.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | Crumb[] | — | The path — id, label, optional href. |
| maxVisible | number | — | Crumbs shown before the middle collapses into an ellipsis. |
| onNavigate | (crumb) => void | — | Called on activation; prevents default navigation when set. |