Focusgroup: Menu & Menubar Pattern

A basic vertical menu with Up/Down arrow navigation.

focusgroup="menu"

Try it: Tab to (or click) a menu item, then use ↓ and ↑ to navigate between items.

menu defaults to block wrap (Up/Down with wrapping). This demo uses those defaults.
The menu is a single tab stop. Arrow keys navigate within.
No JavaScript needed for navigation

View source

<div focusgroup="menu" aria-label="File actions"
     class="menu-vertical">
    <button type="button" class="menu-item">New</button>
    <button type="button" class="menu-item">Open…</button>
    <button type="button" class="menu-item">Save</button>
    <button type="button" class="menu-item">Exit</button>
</div>

A horizontal menubar. menubar defaults to inline (Left/Right) navigation between top-level items. Each submenu uses a separate focusgroup="menu" which defaults to block (Up/Down) navigation. Submenus use the popover attribute for display.

focusgroup="menubar"

Try it: Tab to the menubar. Use → ← to move between top-level items. Press Enter or Space to open a submenu, then use ↓ ↑ inside. Press Escape to close and return focus to the menu bar item.

menubar defaults to inline wrap (Left/Right with wrapping). No explicit modifiers are needed.
menu defaults to block wrap (Up/Down with wrapping). No explicit modifiers are needed.
Nested focusgroups are independent scopes. They don't interfere with each other.
The popover attribute handles submenu visibility
The spec leaves the orthogonal axis (Up/Down on the menubar) free for authors. JavaScript can open/close submenus with those keys as a progressive enhancement.

View source

<ul role="menubar" focusgroup="menubar"
     aria-label="Application Menu" class="menubar">
    <li role="none">
        <button role="menuitem" type="button" class="menubar-item"
             aria-haspopup="menu" aria-expanded="false"
             popovertarget="filemenu">File</button>
        <ul role="menu" focusgroup="menu"
             id="filemenu" popover aria-label="File submenu" class="submenu">
            <li role="none"><button type="button" class="submenu-item"
                 autofocus>New</button></li>
            <li role="none"><button type="button" class="submenu-item">Open</button></li>
            <li role="none"><button type="button" class="submenu-item">Save</button></li>
        </ul>
    </li>
    <!-- More menu items... -->
</ul>

Key Point: Independent Nested Scopes

When a focusgroup is nested inside another, they are completely independent. Each has its own navigation axis, wrapping behavior, memory, and entry point. Arrow keys only affect the focusgroup that currently has focus within it.

In the menubar example above:

Left/Right arrows navigate the menubar (inline axis)
Up/Down arrows navigate within an open submenu (block axis)
Tab moves focus out of the submenu and continues through the normal tab order

Menu & Menubar Pattern

Simple Vertical Menu

Menubar with Popover Submenus

Key Point: Independent Nested Scopes