ns-ui
A breadcrumb trail that collapses from the middle into a menu of the hidden levels, with an accent rule that sweeps under the current level.
Use when a path deep enough that the middle levels must actually leave the row, where the guarantee needed is that no level becomes unreachable: the first crumb and the last two survive and everything between folds into one ellipsis menu still reachable by keyboard and assistive tech; pick breadcrumb-fold instead when every ancestor must stay individually visible and the trail can afford to compress each level to a sliver rather than hide any.
Install
npx shadcn add https://design.helpmarq.comns-ui / breadcrumb-overflow-menu — a trail that gives way from the middle
container — full width
container — 320px
| Prop | Type | Default | Description |
|---|---|---|---|
| items | Crumb[] | — | Ordered root → current. The last item is the current page. |
| separator? | ReactNode | — | Rendered between crumbs. Default "/". |
| minVisibleHead? | number | — | Crumbs at the head that can never collapse. Default 1. |
| minVisibleTail? | number | — | Crumbs at the tail that can never collapse, current included. Default 2. |
| onNavigate? | (item: Crumb, index: number) => void | — | — |
| ariaLabel? | string | — | — |
| className? | string | — | — |