Menubar
Desktop-style application menu bars following the WAI-ARIA Menubar pattern, consuming composed Menu components with roving tabindex, inter-menu arrow key transitions, and hover switching.
Application Menu Bar
With Icons & Section Groups
API reference
MenubarProps
childrenReact.ReactNode—
Name: children
Description: The Menu instances rendered within the menubar.
Type: React.ReactNode
Default: —
labelstring'Application menu'
Name: label
Description: Accessible label for the menubar container (aria-label).
Type: string
Default: 'Application menu'
orientation'horizontal' | 'vertical''horizontal'
Name: orientation
Description: Orientation of the menubar container.
Type: 'horizontal' | 'vertical'
Default: 'horizontal'
openMenuIdstring | null—
Name: openMenuId
Description: Controlled ID of the currently open menu.
Type: string | null
Default: —
onOpenMenuChange(menuId: string | null) => void—
Name: onOpenMenuChange
Description: Callback fired when the active/open menu changes.
Type: (menuId: string | null) => void
Default: —
Keyboard Navigation (WAI-ARIA Menubar)
| Key | Target | Behavior |
|---|---|---|
| → | Menubar Trigger | Moves focus to the next menubar trigger (wraps around). |
| ← | Menubar Trigger | Moves focus to the previous menubar trigger (wraps around). |
| Home / End | Menubar Trigger | Jumps focus to the first or last menubar trigger. |
| ↓ / Enter / Space | Menubar Trigger | Opens the menu and moves focus to the first item. |
| ↑ | Menubar Trigger | Opens the menu and moves focus to the last item. |
| → | Inside Open Menu | Closes the current menu, opens the next menu in the menubar, and focuses its first item. |
| ← | Inside Open Menu | Closes the current menu, opens the previous menu in the menubar, and focuses its first item. |
| Escape | Inside Open Menu | Closes the menu and returns focus to the menubar trigger button. |
| Tab | Menubar / Menu | Closes open menus and advances focus out of the menubar to the next page element. |
Accessibility Highlights
- Composite Widget Semantics: Container uses
role="menubar"witharia-orientation="horizontal", while top-level triggers userole="menuitem"witharia-haspopup="menu". - Single Tab Stop: The entire menubar acts as one tab stop with roving
tabIndex(0 on active item, -1 on others). - Desktop Application Experience: Seamless inter-menu arrow key navigation and mouse hover transfer when any menu is open.
- Focus Return (WCAG 2.4.3): Closing any menu via Escape returns focus directly to the menubar trigger.
- Zero 3rd-Party Dependencies: Built purely with React context, native DOM event handling, and CSS.