KQ-120 · HINGE/NAV

Hinge Nav

Navigation doors hinged on the frame edges — pull a side tab and the panel swings in from edge-on over the dimmed stage, bumping the frame as it lands; Escape or the stage swings it shut.

KQ-120 · HINGE/NAV

Control Bay · 2 DoorsKQ-120

Dampingζ 0.83

Stiffness640 N/M

Mass1.00 KG

Settle300 MS

Routed · —

Pull a side tab - the door swings in on its hinge.

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/hinge-nav

Props

doors: { side: "left" | "right", label, items }[]; default —; One door per side; one open at a time.
children: ReactNode; default —; The stage content the doors swing over.
onSelect: (side, id) => void; default —; Fires when a door row is chosen; the door closes after.
height: number; default 280; Stage height in px.

Prop	Type	Default	Description
doors	{ side: "left" \| "right", label, items }[]	—	One door per side; one open at a time.
children	ReactNode	—	The stage content the doors swing over.
onSelect	(side, id) => void	—	Fires when a door row is chosen; the door closes after.
height	number	280	Stage height in px.