◇

Toolbar

6 parts

A container that groups a set of controls — buttons, toggles, links, separators — into a single keyboard-navigable strip (role="toolbar"). Like an editor's formatting bar, the whole toolbar is one tab stop: Tab moves into it, then arrow keys roam between items (Home/End and PageUp/PageDown jump to the ends), with optional wrap-around via loop. It owns the roving-focus state, exposes data-orientation for styling, and provides context to every ToolbarButton, ToolbarLink, ToolbarToggleGroup and ToolbarSeparator. Reach for it to assemble action bars, formatting toolbars, or any cluster of related controls.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from '@robonen/primitives/menus/toolbar';

<ToolbarRoot>
  <ToolbarButton />
  <ToolbarLink />
  <ToolbarSeparator />
  <ToolbarToggleGroup />
  <ToolbarToggleItem />
</ToolbarRoot>

API Reference

ToolbarButton

Button

A focusable control within a `ToolbarRoot`. Registers itself with the toolbar's roving-focus collection so arrow keys can move to it, carrying the single `tabindex="0"` only while it is the active item. Renders a `<button>` by default; use `as` / `as="template"` to render a link or any other element.

Prop	Type	Default	Description
`disabled`?	`boolean`	—	—

ToolbarLink

Link

A link within a `ToolbarRoot`, rendered as an `<a>` by default. It joins the toolbar's roving-focus order like a `ToolbarButton`, and — because anchors do not activate on Space natively — pressing Space triggers a click so keyboard users can follow the link the same way they would a button.

No props or events — renders its element and forwards attributes.

ToolbarRoot

Root

A container that groups a set of controls — buttons, toggles, links, separators — into a single keyboard-navigable strip (`role="toolbar"`). Like an editor's formatting bar, the whole toolbar is one tab stop: Tab moves into it, then arrow keys roam between items (Home/End and PageUp/PageDown jump to the ends), with optional wrap-around via `loop`. It owns the roving-focus state, exposes `data-orientation` for styling, and provides context to every `ToolbarButton`, `ToolbarLink`, `ToolbarToggleGroup` and `ToolbarSeparator`. Reach for it to assemble action bars, formatting toolbars, or any cluster of related controls.

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	—	—
`dir`?	`RovingDirection`	—	Writing direction. When omitted, inherits from a `ConfigProvider`, falling back to `'ltr'`.
`loop`?	`boolean`	—	—
`currentTabStopId`?	`string \| null`	—	Controlled id of the item that currently holds the tab stop. Bind with `v-model:currentTabStopId`. When unbound the toolbar tracks it internally.
`defaultCurrentTabStopId`?	`string`	—	Initial current tab-stop id (uncontrolled).
`preventScrollOnEntryFocus`?	`boolean`	`false`	Prevent scrolling the item into view when focus first enters the toolbar.

Emits

Event	Payload
`update:currentTabStopId`	`[value: string \| null \| undefined]`

ToolbarSeparator

Separator

A visual divider that delimits groups of controls inside a `ToolbarRoot`, exposed as `role="separator"`. When `orientation` is omitted it inherits the opposite of the toolbar's orientation (a horizontal toolbar gets a vertical separator), so it sits correctly across the line of items by default. Mark it `decorative` to drop it from the accessibility tree entirely.

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	—	—
`decorative`?	`boolean`	`false`	When `true` the separator is purely decorative and is hidden from assistive technology (`role="none"`, no `aria-orientation`). Otherwise it exposes `role="separator"` and its `aria-orientation`.

ToolbarToggleGroup

ToggleGroup

A `ToggleGroupRoot` adapted for use inside a `ToolbarRoot`. It forwards the toolbar's orientation and reading direction, and disables the toggle group's own roving focus (`rovingFocus={false}`) so the toolbar stays the single keyboard-navigation owner — otherwise two competing roving controllers would fight over arrow keys. Supports the same single / multiple `v-model`, `defaultValue`, `type`, `disabled` and `loop` as `ToggleGroupRoot`.

No props or events — renders its element and forwards attributes.

ToolbarToggleItem

ToggleItem

A single toggle button inside a `ToolbarToggleGroup`. It composes a `ToolbarButton` (which joins the toolbar's roving-focus order) with a `ToggleGroupItem` (which owns the pressed state, `aria-pressed` / `aria-checked` and `data-state`), so one control answers to both the toolbar's keyboard navigation and the toggle group's selection model.

No props or events — renders its element and forwards attributes.