Navbar Menu
Hover-driven menu whose pill and panel morph between items.
- 1.6 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/navbar-menu.jsonAdds components/velora/navbar-menu.tsx, installs motion.
Props
NavbarMenu
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
className | string | — |
MenuItem
| Prop | Type | Default |
|---|---|---|
label* | string | — |
hrefRenders the item as a link; ignored when the item has a panel | string | — |
children | React.ReactNode | — |
className | string | — |
Accessibility
- Reduced motion
- The highlight pill jumps between items and the panel appears and disappears instantly, with no fade, rise or scale.
- Keyboard
- Tabbing to an item with a panel opens it, and Tab continues into the panel. Escape closes it and returns focus to the item, focus leaving the menu closes it, and Enter or Space reopens it. Items with `href` are ordinary links.
- Screen readers
- A <nav> of buttons and links; only items with a panel carry aria-expanded, plus aria-controls while open.