How to build an accessible Menubar in React

Implements the WAI-ARIA menubar pattern: a roving-tabindex row of menuitem triggers (Left/Right/Home/End) where ArrowDown opens the menu and focuses its first item, Up/Down move within the menu, and Escape closes and restores focus to the trigger

When to use a Menubar

• 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 it

• 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

Keyboard interactions

Role menubar, verified at WCAG 2.2-AA.

• ArrowLeft
• ArrowRight
• ArrowDown
• ArrowUp
• Home
• End
• Enter
• Escape

Common mistakes

Avoid: Using Menubar entries as page links

Prefer: <NavigationMenu> for navigating between destinations

menubar implies commands/actions within the current view, not navigation to other pages

Example

<Menubar aria-label="Main" menus={[{ id: "file", label: "File", items: [{ id: "new", label: "New", onSelect: () => {} }] }]} />

See the full Menubar reference →