v150 · HTML · Accessibility
Menu Bar
An accessible menu bar built with focusgroup="menubar" — arrow keys cycle through top-level items, Tab leaves the bar entirely (roving tabindex pattern handled natively), and Enter/Space opens the dropdown. The comparison panel shows the Tab-flood problem without focusgroup.
focusgroup menu bar — Tab once to enter, arrow keys to navigate
Tab to focus bar ·
←→ to move ·
Enter / Space to open ·
Esc to close ·
Tab again to exit
// Tab into the menu bar, then use arrow keys…
With focusgroup="menubar"
One Tab stop for the whole bar (roving tabindex via focusgroup)
Without focusgroup (Tab flood)
Four separate Tab stops — keyboard users must Tab through every item
<!-- One attribute provides roving tabindex + wrap-around arrow-key nav -->
<div role="menubar" focusgroup="menubar">
<button role="menuitem">File</button>
<button role="menuitem">Edit</button>
<button role="menuitem">View</button>
<button role="menuitem">Help</button>
</div>
<!-- menubar defaults to inline + wrap navigation -->
<!-- Without focusgroup: 4 separate Tab stops = keyboard navigation burden -->
see also
- Grid Navigation — 2D grid with focusgroup
- Radio Group — single-select radio pattern
- Roving Tabindex Compare — manual vs focusgroup
- Toolbar Demo — icon toolbar with focusgroup
- ChromeStatus entry
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗