How to build an accessible NavigationMenu in React

Wrapped in a navigation landmark with a roving-tabindex row of links and disclosure triggers; triggers expose aria-expanded/aria-controls onto a flyout panel, and outside-pointer or Escape dismisses the open panel and restores trigger focus

When to use a NavigationMenu

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

• 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

Keyboard interactions

Role navigation, verified at WCAG 2.2-AA.

• ArrowLeft
• ArrowRight
• Home
• End
• Enter
• Space
• Escape

Common mistakes

Avoid: Putting action commands (Save, Delete) inside NavigationMenu flyouts

Prefer: <Menubar> or <Menu> for commands; NavigationMenu is for destinations

navigation landmark implies moving between destinations, not invoking actions

Example

<NavigationMenu aria-label="Main" items={[{ id: "home", label: "Home", href: "/" }, { id: "products", label: "Products", content: <ul>…</ul> }]} />

See the full NavigationMenu reference →