Headless / Navigation

Toolbar

Toolbar groups related controls into a role="toolbar" widget with roving focus. The whole cluster is one tab stop; the arrow keys move between the controls inside.

Loading playground…

What it is

A single wrapper component. Put your buttons inside; Toolbar renders a role="toolbar" and captures the arrow keys to move focus among the focusable children. It styles nothing and manages no state — its only job is the roving-focus keyboard model.

Install

example.tsx

yarn add @usemotif/headless

example.tsx

import { Toolbar } from '@usemotif/headless';

API

Toolbar

stable

function Toolbar(props: ToolbarProps): JSX.Element

orientation"horizontal" | "vertical"= "horizontal"

Decides whether the left/right or up/down arrows move focus.

aria-labelstring

Names the toolbar — what its controls have in common.

childrenReactNode

The controls. Each focusable child becomes one stop in the roving sequence.

styleCSSProperties

Inline style for the toolbar element.

Keyboard

Key	Action
Arrow Right / Left (horizontal)	Move focus to the next / previous control, wrapping
Arrow Down / Up (vertical)	Move focus to the next / previous control, wrapping
Home / End	Focus the first / last control

Accessibility

role="toolbar" groups the controls for assistive technology — a screen reader announces the toolbar and its label, then the controls within it. The roving-focus model is the key behaviour: a toolbar of ten buttons is a single tab stop, so a keyboard user tabs past the toolbar in one press rather than ten, and uses the arrow keys to reach a specific button.

Give the toolbar an aria-label describing what its controls share — "Text formatting", "Table actions". Each control inside still needs its own accessible name.

Examples

A text-formatting toolbar:

example.tsx

<Toolbar aria-label="Text formatting">
<IconButton aria-label="Bold"><BoldIcon /></IconButton>
<IconButton aria-label="Italic"><ItalicIcon /></IconButton>
<IconButton aria-label="Underline"><UnderlineIcon /></IconButton>
<IconButton aria-label="Link"><LinkIcon /></IconButton>
</Toolbar>