KQ-515 · CANOPY/MENU

Canopy Menu

A mega menu that stays one panel. Hovering or focusing an item unfolds the canopy beneath the bar — scaleY from the top on glide, clipped — and its columns cascade in inside the 600ms budget. Moving to another item morphs the same panel to the new content's measured width and height rather than closing and reopening; Left and Right walk the bar, Tab steps down into the open panel, and Escape closes and hands focus back.

KQ-515 · CANOPY/MENU

Fernworks

Rope, timber, and the software that tracks both

Hover or focus an item in the bar. The panel keeps its identity and resizes to whatever the next item holds.

Panel closed

Install

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

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

Props

items: { id: string; label: string; columns: { heading: string; links: { label: string; href: string }[] }[] }[]; default —; The bar and the panel behind each item.
openDelay: number; default 80; Hover intent delay in ms before an unopened panel unfolds; moving between items once open is immediate.
label: string; default "Site"; Accessible name for the nav.
onOpenChange: (id: string | null) => void; default —; Fires with the open item's id, or null when the panel closes.

Prop	Type	Default	Description
items	{ id: string; label: string; columns: { heading: string; links: { label: string; href: string }[] }[] }[]	—	The bar and the panel behind each item.
openDelay	number	80	Hover intent delay in ms before an unopened panel unfolds; moving between items once open is immediate.
label	string	"Site"	Accessible name for the nav.
onOpenChange	(id: string \| null) => void	—	Fires with the open item's id, or null when the panel closes.