NavigationMenu
Site navigation bar with links and dropdown flyout panels
Category: navigation · WCAG 2.2-AA · navigation, menu, flyout, site-nav
States
- closed
- open
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Alias of `ariaLabel` — the same invisible accessible name under the other spelling. Neither is deprecated. |
ariaLabel | string | — | Invisible accessible name. The catalog convention; `aria-label` is accepted as an alias for the DOM spelling. |
items | NavigationMenuItem[] | — | The items to render. |
aria-label | string | — | Accessible label used when no visible label is present. |
orientation | 'horizontal' | 'vertical' | 'both' | horizontal | Which arrow keys move focus, and the axis the items lay out on: `horizontal` (Left/Right), `vertical` (Up/Down), or `both` (all four). |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-surface--cascivo-color-bg-subtle--cascivo-color-text--cascivo-color-border--cascivo-focus-ring--cascivo-motion-enter--cascivo-motion-exit
When to use
- Primary site navigation where some destinations are plain links and others reveal a flyout of grouped links
- A header nav bar that mixes direct links with rich dropdown panels
When not to use
- Application commands and actions grouped under File/Edit/View — use Menubar
- A single trigger opening a list of actions — use a Menu/Dropdown
- Switching between peer content panels in place — use Tabs
How to build an accessible NavigationMenu in React →
Examples
Basic
<NavigationMenu aria-label="Main" items={[{ id: "home", label: "Home", href: "/" }, { id: "products", label: "Products", content: <ul>…</ul> }]} />