# Toolbar

> An accessible WAI-ARIA formatting toolbar with roving tabindex, toggle and single-select control groups, hover/focus tooltips, and an overflow menu — fully token-driven and design-system agnostic.

- Category: Toolbar
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Prism
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: navigation
- Page: https://builder.atheros.ai/components/toolbar
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_toolbar/preview-f995fdfc3447.webp

## Features

- WAI-ARIA toolbar pattern: `role="toolbar"` with grouped controls and `role="separator"` dividers
- Roving tabindex: one control tabbable at a time, ArrowLeft/ArrowRight/Home/End move focus with wrap
- Toggle buttons (bold, italic, underline) flip `aria-pressed` and a visual active state
- Single-select alignment group (left, center, right) behaves like a radio set
- CSS-driven tooltips shown on hover and focus, with accessible `aria-label` retained
- Overflow "More" menu using the ARIA menu button pattern (`aria-haspopup`, `aria-expanded`, Escape and outside-click close)
- Responsive layout with horizontal scroll on narrow viewports

## Accessibility

- **Toolbar role** — `role="toolbar"` with `aria-label` and `aria-orientation`
- **Grouped controls** — `role="group"` per group, `role="separator"` dividers
- **Roving tabindex** — One control `tabindex="0"`, rest `-1`; arrows/Home/End move focus
- **Toggle buttons** — `aria-pressed` flipped on bold/italic/underline
- **Single-select group** — Alignment buttons keep one `aria-pressed="true"`
- **Menu button** — `aria-haspopup`, `aria-expanded`, `aria-controls`, Escape and outside-click close
- **ARIA labels** — All icon-only buttons carry explicit `aria-label`
- **Focus indicators** — `:focus-visible` with `--ring` outline on all elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowRight` — Focus next toolbar control (wraps)
- `ArrowLeft` — Focus previous toolbar control (wraps)
- `Home` — Focus first toolbar control
- `End` — Focus last toolbar control
- `Escape` — Close the overflow menu

## Common questions

**Which frameworks is Toolbar available in?**

Toolbar ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Toolbar free?**

Yes. Toolbar is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Toolbar support dark mode?**

Yes. Toolbar ships light and dark themes, both drawn from the Prism design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Toolbar live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/toolbar

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt