menubar

When to use

For a persistent, application-style menubar that mirrors a desktop app’s main menu (File, Edit, View, …). The most legitimate uses are inside web-based authoring tools, IDEs, and full-screen productivity apps.

If your “menubar” is actually a site header navigation, it is NOT a menubar. Use <nav> with <ul> of <a> links. The menubar role demands single-tab-stop, arrow-key navigation, and Escape-to-close — none of which match user expectation for a site header.

Children of a menubar are usually role="menuitem" triggers that open submenus (aria-haspopup="menu").

Keyboard + focus contract

Per the APG menubar pattern:

• Tab enters the menubar onto the first or last-focused item; Tab moves OUT.
• Left/Right arrows move focus between top-level menubar items (with wraparound).
• Down arrow (or Enter/Space) opens the focused item’s submenu and moves focus to its first menuitem.
• Up arrow opens the submenu and moves focus to the last menuitem.
• Escape inside a submenu closes the submenu and returns focus to its menubar item.
• Typeahead: typing a letter jumps to the next item starting with that letter.

Use a roving tabindex.

Common failures

• role="menubar" on a site’s primary <nav>. Mismatch between announced role and user expectation.
• Every item has tabindex="0", so Tab cycles through every menubar item. The pattern is single tab-stop.
• Submenus that open on hover but not on Down arrow.
• No aria-haspopup/aria-expanded on menubar items that trigger submenus.
• Escape inside a submenu collapses but loses focus — must return to the parent menubar item.

Example

<ul role="menubar" aria-label="Document">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">File</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Edit</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">View</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Help</li>
</ul>