KQ-113 · DEPTH/MENU
Depth Menu
An inline menu that spends depth on hierarchy — entering a branch pushes the current level back into a hanging trail, a breadcrumb rail floats above for multi-level jumps, and focus always returns to the row you came from.
KQ-113 · DEPTH/MENU
Array Console · 3 LevelsKQ-113
Last Order · —
Step into a branch - the trail hangs behind you.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/depth-menu
Props
- items
- { id, label, hint?, children? }[]
- default —
- The tree; branch nodes carry children.
- onSelect
- (id, path) => void
- default —
- Fires on a leaf with its ancestor path.
- depthGap
- number
- default 80
- Perspective-honest recession per level.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id, label, hint?, children? }[] | — | The tree; branch nodes carry children. |
| onSelect | (id, path) => void | — | Fires on a leaf with its ancestor path. |
| depthGap | number | 80 | Perspective-honest recession per level. |