React Breadcrumbs
The trail for deep structures — product catalogs six levels down, register docs, file hierarchies. The current page is plain text with aria-current="page"; earlier levels are quiet links. Trails longer than maxItems collapse the middle behind an ellipsis button that expands in place (first item and last two always stay visible).
Six levels collapsed — click the ellipsis to expand.
Installation
npx shadcn@latest add "http://localhost:3000/registry/breadcrumbs.json"
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label, href? }[] | — | Trail, root first; last item is the current page |
| maxItems | number | — | Collapse threshold; omit to never collapse |
| separator | 'chevron' \ | 'slash' | 'chevron' |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.