Menubar
Horizontal application menu bar with keyboard-navigable dropdown menus
Category: navigation · WCAG 2.2-AA · navigation, menubar, menu, application
States
- closed
- open
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ariaLabel | string | — | Invisible accessible name for the menubar landmark. The catalog convention; `aria-label` is accepted as an alias for the DOM spelling. Exactly one of the two is required — a menubar with no accessible name is a bug, so the type enforces it. |
menus | MenubarMenu[] | — | The top-level menus to render. |
aria-label | string | — | Accessible label used when no visible label is present. |
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
- A persistent application-style command bar (File / Edit / View) where each top-level entry opens a menu of actions
- Desktop-like apps that expose grouped commands across a horizontal bar
When not to use
- Site or section navigation between pages or destinations — use NavigationMenu
- A single trigger that opens one menu of actions — use a Menu/Dropdown
- Switching between peer content panels — use Tabs
How to build an accessible Menubar in React →
Examples
Basic
<Menubar aria-label="Main" menus={[{ id: "file", label: "File", items: [{ id: "new", label: "New", onSelect: () => {} }] }]} />Related components
- NavigationMenu — NavigationMenu navigates between destinations; Menubar invokes commands
- Menu — Each Menubar entry behaves like a single Menu anchored under its trigger