NavigationMenu
Product or marketing navigation with an understandable structure and one shared, resizing panel.
Base UI reference ↗Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add navigation-menuDependencies
What add navigation-menu installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
npm
@base-ui/[email protected]
Examples
2 examples · 1 componentPanels and links
Two panels share one popup that resizes between them; Pricing is a plain link.
Current page
A flat bar of links; active marks the current page for everyone.
API reference
Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.
| Prop | Type | Default |
|---|---|---|
NavigationMenuRoot; value/defaultValue, onValueChange, delay and orientation. Renders the shared popup for you. | nav | — |
NavigationMenuList / NavigationMenuItemThe top-level list and its items. | ul / li | — |
NavigationMenuTriggerOpens the item's content on hover, click or keyboard; the chevron turns when open. | button | — |
NavigationMenuContentThe item's panel, up to 32rem wide; the popup resizes to it. | div | — |
NavigationMenuLinkactive marks the current page (aria-current="page"); render={<NextLink />} for router links. | a | — |
navigationMenuTriggerClassTrigger styles for top-level links without a submenu. | string | — |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| Closed | Only the top-level row. |
| Open | A shared panel below the trigger; the chevron turns 180°. |
| Switching | Moving to another trigger slides and resizes the same panel. |
| Current page | Filled background plus aria-current="page". |
| Focus | Offset outline on triggers and links. |
Accessibility
Name the root with aria-label so it is announced as a navigation landmark; the list keeps its ul/li semantics.
Triggers are buttons with aria-expanded (the disclosure navigation pattern): Enter or Space opens the panel, Tab moves into its links, and Escape closes it and returns focus to the trigger.
Arrow Left and Right move between top-level items; hover opens after a short delay and never traps the pointer.
Mark the current page with active (aria-current="page"), not only with a color; the panel animations stop with reduced motion.