KQ-1176 · BLIND/MENU

Blind Menu

An account menu that hangs from its button like a window blind. Opened, the frame lowers to its length on glide while each slat, one item each, turns from nearly edge-on to face you on snap from the top down, stagger apart; the slat under the pointer or the focus leans toward you and catches the light, and closing draws the blind back up, slats turning shut from the bottom and rising into a stack under the headrail on exit tweens. It is the menu-button pattern: arrows move and wrap, Home and End jump, typing jumps to an item, Enter or Space chooses, and Escape closes and hands focus back to the trigger.

KQ-1176 · BLIND/MENU

Waylight

Balance12,480.35

Harbour Coffee−4.20
Fieldline payroll+2,310.00
Gaugeworks invoice−186.40

menu open · 7 items · nothing chosen yet

Open it on the Atelier stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/blind-menu

Props

items: { id: string; label: string; icon?: ReactNode; shortcut?: string; tone?: "default" | "danger"; disabled?: boolean }[]; default —; The menu, one slat per item. A danger item is drawn in the danger colour; a disabled one is skipped by the arrows.
onSelect: (id: string) => void; default —; An item was chosen. Fires before the blind goes up.
label: string; default —; The account's name: the trigger's text and the menu's name.
detail: string; default —; A second line under the name: an email, a plan, a role.
avatar: ReactNode; default —; Before the name, 28 px. Defaults to the name's initials in a circle.
open / defaultOpen: boolean; default false; Whether the blind is down.
onOpenChange: (open: boolean) => void; default —; Fires from the press, key or outside press that opened or closed it.
slats: number; default 5; The most slats the blind lowers, 4 to 8. A longer menu scrolls inside it a slat at a time, with a mark on the bottom rail while there is more.
stagger: number; default 0.5; How far apart the slats turn open, 0 (all at once) to 1 (a slow wave), kept inside the 600 ms budget.
finish: "wood" | "aluminium" | "fabric"; default "aluminium"; What the slats are made of: grained wood and curved aluminium are fixed pigments; fabric is woven from the menu's own surface colours.
align: "start" | "end"; default "end"; Which edge of the trigger the blind hangs from.
sound: boolean; default false; Play a swish when the visitor lowers or raises the blind (pitched down going up) and a click when an item is chosen.
disabled: boolean; default false; The trigger cannot be pressed.
className: string; default —; Classes for the root, which wraps the trigger; the blind hangs below it.

Prop	Type	Default	Description
items	{ id: string; label: string; icon?: ReactNode; shortcut?: string; tone?: "default" \| "danger"; disabled?: boolean }[]	—	The menu, one slat per item. A danger item is drawn in the danger colour; a disabled one is skipped by the arrows.
onSelect	(id: string) => void	—	An item was chosen. Fires before the blind goes up.
label	string	—	The account's name: the trigger's text and the menu's name.
detail	string	—	A second line under the name: an email, a plan, a role.
avatar	ReactNode	—	Before the name, 28 px. Defaults to the name's initials in a circle.
open / defaultOpen	boolean	false	Whether the blind is down.
onOpenChange	(open: boolean) => void	—	Fires from the press, key or outside press that opened or closed it.
slats	number	5	The most slats the blind lowers, 4 to 8. A longer menu scrolls inside it a slat at a time, with a mark on the bottom rail while there is more.
stagger	number	0.5	How far apart the slats turn open, 0 (all at once) to 1 (a slow wave), kept inside the 600 ms budget.
finish	"wood" \| "aluminium" \| "fabric"	"aluminium"	What the slats are made of: grained wood and curved aluminium are fixed pigments; fabric is woven from the menu's own surface colours.
align	"start" \| "end"	"end"	Which edge of the trigger the blind hangs from.
sound	boolean	false	Play a swish when the visitor lowers or raises the blind (pitched down going up) and a click when an item is chosen.
disabled	boolean	false	The trigger cannot be pressed.
className	string	—	Classes for the root, which wraps the trigger; the blind hangs below it.