ns-ui
A breadcrumb that folds like a camera bellows — ancestor segments rest pleated into narrow slivers and the current page sits fully extended, with hover or focus inflating any sliver back to natural width as its neighbours redistribute the fixed total width.
Use when Pick breadcrumb-fold over breadcrumb-overflow-menu when every ancestor must stay individually reachable at all times — deep file paths, org trees, nested categories — because nothing is ever folded into a menu; the trail redistributes a fixed total width instead of hiding levels. Pick breadcrumb-overflow-menu instead when the hierarchy is so deep that even a compressed sliver per level would still overflow, and an ellipsis-menu fallback for the middle is acceptable.
Install
npx shadcn add https://design.helpmarq.comns-ui / breadcrumb-fold — every ancestor stays reachable, pleated
fixed budget — ancestors rest pleated
wider budget — the same trail, more room to breathe
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BellowsCrumbItem[] | — | Ordered root → current. The last item is the current page. |
| onNavigate? | (item: BellowsCrumbItem, index: number) => void | — | — |
| pleat? | number | — | Width a pleated segment rests at. Default 20. |
| ariaLabel? | string | — | — |
| className? | string | — | — |