Nav Card Drawer

ProNew

A navigation bar with one button that drops a drawer of link cards, which settle in one after another.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/nav-card-drawer

Prop	Type	Default	Description
`brand`	`ReactNode`	`-`	Brand or name at the left of the bar.
`items`	`{ title: string; description: string; href: string; icon?: ReactNode }[]`	`-`	Cards in the drawer.
`label`	`string`	`"Main"`	Accessible name of the navigation.
`triggerLabel`	`string`	`"Explore"`	Text of the opening button.
`defaultOpen`	`boolean`	`false`	Open on first render.

Enter or Space on the button opens or closes the drawer.
Tab moves through the cards; Escape closes the drawer and returns focus to the button.

The drawer fades and drops 10px; each card adds a short spring with 40ms between cards.
With prefers-reduced-motion: reduce the drawer and cards appear instantly.
A nav landmark with a disclosure button (aria-expanded, aria-controls); the closed drawer is inert and hidden.
Cards are plain links.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/nav-card-drawer

Prop	Type	Default	Description
`brand`	`ReactNode`	`-`	Brand or name at the left of the bar.
`items`	`{ title: string; description: string; href: string; icon?: ReactNode }[]`	`-`	Cards in the drawer.
`label`	`string`	`"Main"`	Accessible name of the navigation.
`triggerLabel`	`string`	`"Explore"`	Text of the opening button.
`defaultOpen`	`boolean`	`false`	Open on first render.

Enter or Space on the button opens or closes the drawer.
Tab moves through the cards; Escape closes the drawer and returns focus to the button.

The drawer fades and drops 10px; each card adds a short spring with 40ms between cards.
With prefers-reduced-motion: reduce the drawer and cards appear instantly.
A nav landmark with a disclosure button (aria-expanded, aria-controls); the closed drawer is inert and hidden.
Cards are plain links.