Toolbar Pattern

Arrow-key navigation for toolbar controls — the most common focusgroup use case.

Basic Toolbar

A simple horizontal toolbar. All buttons are natively focusable — focusgroup makes the group a single tab stop with arrow-key navigation.

focusgroup="toolbar inline"
Try it: Click the first button, then press → and ← to navigate. Press Tab to exit the toolbar.
View source 
<div focusgroup="toolbar inline" aria-label="Text
     formatting">
    <button type="button">Bold</button>
    <button type="button">Italic</button>
    <button type="button">Underline</button>
    <button type="button">Strikethrough</button>
</div>

No tabindex Management Needed

With focusgroup, you don't need to set or manage tabindex on any items. The browser automatically collapses all focusable children into a single tab stop — no JavaScript "roving tabindex" boilerplate required.

focusgroup="toolbar inline"
Try it: Press Tab to enter the toolbar. Only one button is reachable via Tab. Use arrows to move between buttons, then Tab to exit. Tab back in — focus is restored to the last-focused button (memory).
View source 
<div focusgroup="toolbar inline"
     aria-label="Document actions">
    <button type="button">New</button>
    <button type="button">Open</button>
    <button type="button">Save</button>
    <button type="button">Print</button>
</div>

Entry Point with focusgroupstart

The focusgroupstart attribute marks which element receives focus when you Tab into the group. Both Tab and Shift+Tab land on this element.

focusgroup="toolbar inline no-memory"
Try it: Press Tab to enter — notice focus lands on "Middle (Entry)", not "First". The no-memory token ensures it always returns to this entry point.
View source 
<div focusgroup="toolbar inline no-memory"
     aria-label="Entry point demo">
    <button type="button">First</button>
    <button type="button" focusgroupstart>Middle (Entry)</button>
    <button type="button">Last</button>
</div>

Vertical Toolbar

Use block instead of inline to restrict navigation to the vertical axis (Up/Down arrows only).

focusgroup="toolbar block"
Try it: Use ↓ and ↑ to navigate. ← and → do nothing.
View source 
<div focusgroup="toolbar block"
     aria-label="Vertical toolbar"
     aria-orientation="vertical">
    <button type="button">Cut</button>
    <button type="button">Copy</button>
    <button type="button">Paste</button>
</div>