KQ-513 · FOLD/SIDEBAR

Fold Sidebar

An app sidebar that folds to a rail. The width travels between 224px and 56px on glide while each label fades and is clipped by its own row, and because every icon sits half a rail from the edge nothing shifts sideways as the panel narrows. The active pill travels between items through a shared layoutId, group panels animate to a measured height rather than a reserved one, the fold control's double chevron turns over on snap, and in rail mode a hovered or focused item names itself in a tooltip beside the rail.

KQ-513 · FOLD/SIDEBAR

Gaugeworks

Dashboards

Four saved views, two of them shared with the floor.

4 views

Open · Dashboards

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/fold-sidebar

Props

groups: { label: string; items: { id: string; label: string; icon: string }[] }[]; default —; Sections and their items; icons come from the built-in set (gauge, grid, bell, users, card, gear, dot).
value / defaultValue: string; default —; Controlled or initial active item id.
onValueChange: (id: string) => void; default —; Fires on select.
collapsed / defaultCollapsed: boolean; default false; Rail mode, controlled or initial.
onCollapsedChange: (collapsed: boolean) => void; default —; Fires on fold.
label: string; default "Main"; Accessible name for the nav.

Prop	Type	Default	Description
groups	{ label: string; items: { id: string; label: string; icon: string }[] }[]	—	Sections and their items; icons come from the built-in set (gauge, grid, bell, users, card, gear, dot).
value / defaultValue	string	—	Controlled or initial active item id.
onValueChange	(id: string) => void	—	Fires on select.
collapsed / defaultCollapsed	boolean	false	Rail mode, controlled or initial.
onCollapsedChange	(collapsed: boolean) => void	—	Fires on fold.
label	string	"Main"	Accessible name for the nav.