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 |
|---|---|---|---|
items | NavigationMenuItem[] | — | The items to render. |
aria-label | string | — | Accessible label used when no visible label is present. |
orientation | 'horizontal' | 'vertical' | 'both' | horizontal | Layout orientation of the component. |
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> }]} />