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

PropTypeDefaultDescription
items{ id, label, hint?, children? }[]The tree; branch nodes carry children.
onSelect(id, path) => voidFires on a leaf with its ancestor path.
depthGapnumber80Perspective-honest recession per level.