ns-ui
Nested menus as telescoping card-catalog trays: opening a submenu shunts the parent back and dims it instead of spawning a flyout, leaving a 12px clickable edge per ancestor as a live breadcrumb of depth.
Use when Use when nested content is genuinely a menu — role=menu/menuitem rows, ArrowRight/Enter to drill in, ArrowLeft/Escape to back out — and you want every ancestor level to stay physically on screen as a scaled-down, dimmed, directly-clickable 12px edge so depth is always visible and any level is one click away, which is what makes it suit deep context menus and mobile-width nested navigation where cascading flyovers would overflow or miss diagonal hovers. Pick drill-down-spines instead for full-page drill-down navigation (nav landmark, real page content per level) where history compresses into vertical book-spines rather than menu semantics.
Install
npx shadcn add https://design.helpmarq.comns-ui / menu-nested-trays
Open Share, then Slack: the parent tray doesn't vanish behind a flyout, it shunts back and dims, leaving a 12px edge. Click any exposed edge to jump straight back to that level — or use ArrowRight/Enter to drill in and ArrowLeft/Escape to back out one level at a time.
Try it: open Share → Slack, then click the thin left edge to shunt straight back to File actions in one action instead of backing out twice.
selected → nothing yet
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | accessible name of the root tray; also the "Back to {label}" text once it's an ancestor |
| items | ShuntTrayItem[] | — | — |
| onSelect? | (item: ShuntTrayItem, path: ShuntTrayItem[]) => void | — | fires when a leaf row (no `items`) is activated |
| width? | number | — | — |
| height? | number | — | — |
| className? | string | — | — |