Toolbar

A horizontal or vertical group of related controls (buttons, toggles, links, separators) with arrow-key roving focus. Wraps Radix Toolbar so the keyboard semantics are correct out of the box.

Editor — alignment + formatting

Alignment: left

Side-rail navigation — vertical, icon-only

Installation

pnpm

pnpm dlx @hex-core/cli add toolbar

Side-rail vertical toolbar

Vertical toolbar alongside a canvas

tsx

<Toolbar orientation="vertical" aria-label="Drawing tools">
  <ToolbarToggleGroup type="single" defaultValue="select">
    <ToolbarToggleItem value="select"><CursorIcon /></ToolbarToggleItem>
    <ToolbarToggleItem value="pen"><PenIcon /></ToolbarToggleItem>
    <ToolbarToggleItem value="eraser"><EraserIcon /></ToolbarToggleItem>
  </ToolbarToggleGroup>
  <ToolbarSeparator />
  <ToolbarButton aria-label="Settings"><SettingsIcon /></ToolbarButton>
</Toolbar>

Variant values

orientationLayout direction.

Value	Description
`horizontal`default	Default — controls flow left-to-right.
`vertical`	Controls flow top-to-bottom.

API Reference

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	horizontal	Layout direction. Drives arrow-key behavior — ←→ for horizontal, ↑↓ for vertical.
`aria-label`required	`string`	—	Accessible name for the toolbar landmark. Toolbar mounts as a role='toolbar' region — without a name, AT users hear an unlabelled landmark. If a visible heading sits adjacent, you may pair via aria-labelledby instead (which still satisfies this requirement).

AI Guidance

When to use

Use to group related controls that operate on a single content area (editor, canvas, table). The roving-tabindex behavior means Tab enters the toolbar at the first item, then arrow keys navigate within — preserves the surrounding page's tab order.

When not to use

Don't use for app-level menus (use Menubar). Don't use for a single mutually-exclusive selection (use ToggleGroup directly — Toolbar is for groupING ToggleGroups + Buttons + Links). Don't use for navigation (use NavigationMenu).

Common mistakes

Forgetting aria-label when the toolbar isn't adjacent to a visible heading
Mixing controls that operate on different content areas — Toolbar implies a single target
Using Toolbar inside a Toolbar — nest a vertical Toolbar inside a horizontal one if you really need a 2D grid, but consider whether a single Toolbar with Separators is clearer

Accessibility

Radix wires role='toolbar', roving tabindex (Tab enters at the first focusable item, arrows move within), Home/End jump to first/last. Always pass aria-label when there's no visible heading next to the toolbar.

Related components

Token budget: 600

Verified against @hex-core/components@1.9.0

Edit this page on GitHub