ns-ui

Drill Down Spines

Drill-down navigation where every pushed level compresses into a slim clickable book spine instead of vanishing behind a back button, so the whole navigation history stands on a shelf beside you.

Use when full-page drill-down navigation through a record hierarchy where the levels behind you should stay on screen and clickable as compressed book spines instead of hiding behind a back button; pick menu-nested-trays instead when the nested content is genuinely a menu with menuitem semantics rather than real page content per level, or breadcrumb-overflow-menu when the trail is a text path above otherwise static content rather than the navigation mechanism itself.

Install

npx shadcn add https://design.helpmarq.com/r/drill-down-spines.json
  • navigation
  • drill-down
  • master-detail
  • breadcrumb
  • nav
  • stack
  • history

Support workspace

Props

PropTypeDefaultDescription
initialSpineStackLevelseed level for the stack; only read on mount — the stack is uncontrolled thereafter, drive it via the ref
onNavigate?(id: string) => voidfires after the top (active) level settles — on mount, on push, and once a pop's cascade commits
className?string