Focusgroup: Menu & Menubar Pattern

Simple Vertical Menu

A basic vertical menu with Up/Down arrow navigation.

focusgroup="menu block"

Try it: Click a menu item, then use ↓ and ↑ to navigate between items.

block restricts to Up/Down arrows (vertical menu)
The menu is one tab stop — arrow keys navigate within
No JavaScript needed for navigation

View source

<div focusgroup="menu block" aria-label="File
     actions">
    <div class="menu-item" tabindex="0">New</div>
    <div class="menu-item" tabindex="0">Open…</div>
    <div class="menu-item" tabindex="0">Save</div>
    <div class="menu-item" tabindex="0">Exit</div>
</div>

Menubar with Popover Submenus

A horizontal menubar using inline for Left/Right navigation between top-level items. Each submenu is a separate focusgroup with block for Up/Down navigation. Submenus use the popover attribute for display.

focusgroup="menubar inline wrap"

Try it: Use → ← on the menubar. Click a top-level item to open its submenu, then use ↓ ↑ inside.

The menubar uses inline (Left/Right), each submenu uses block (Up/Down)
Nested focusgroups are independent scopes — they don't interfere with each other
The popover attribute handles submenu visibility
The orthogonal axis (Up/Down on the menubar) is free for authors to use for opening/closing menus via JS

View source

<ul role="menubar" focusgroup="menubar inline
     wrap" aria-label="Application Menu">
    <li role="none">
        <button role="menuitem" type="button"
             style="anchor-name: --file-trigger"
             popovertarget="filemenu">File</button>
        <ul role="menu" focusgroup="menu block wrap"
             id="filemenu" popover
             style="position-anchor: --file-trigger">
            <li role="none"><button role="menuitem"
                 autofocus>New</button></li>
            <li role="none"><button role="menuitem"
                 >Open</button></li>
            <li role="none"><button role="menuitem"
                 >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 both the submenu and the menubar