Skip to main content

​
Overview

Toolbar provides a container for grouping related controls like buttons, toggle buttons, dropdown menus, and links. It supports keyboard navigation and proper focus management.

​
Features

  • Full keyboard navigation
  • Supports horizontal/vertical orientation
  • Flexible layout support
  • Can contain buttons, links, separators, and toggle groups
  • Focus management with roving tabindex
  • Proper ARIA attributes for accessibility

​
Installation

npm install @radix-ui/react-toolbar

​
Anatomy

import * as Toolbar from '@radix-ui/react-toolbar';

export default () => (
  <Toolbar.Root>
    <Toolbar.Button />
    <Toolbar.Separator />
    <Toolbar.Link />
    <Toolbar.ToggleGroup>
      <Toolbar.ToggleItem />
    </Toolbar.ToggleGroup>
  </Toolbar.Root>
);

​
API Reference

​
Root

Contains all the toolbar component parts.
​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the toolbar.
​
dir
'ltr' | 'rtl'
The reading direction of the toolbar. If omitted, inherits from the parent.
​
loop
boolean
default:"true"
When true, keyboard navigation will loop from last item to first, and vice versa.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Button

A button item.
​
disabled
boolean
When true, prevents the user from interacting with the button.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Link

A link item.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
ToggleGroup

A set of two-state buttons that can be toggled on or off.
​
type
'single' | 'multiple'
required
Determines whether a single or multiple items can be pressed at a time.
When type="single":
​
value
string
The controlled value of the pressed item.
​
defaultValue
string
The value of the item to show as pressed when initially rendered (uncontrolled).
​
onValueChange
(value: string) => void
Event handler called when the pressed state changes.
When type="multiple":
​
value
string[]
The controlled value of the pressed items.
​
defaultValue
string[]
The values of the items to show as pressed when initially rendered (uncontrolled).
​
onValueChange
(value: string[]) => void
Event handler called when the pressed state changes.
Common props:
​
disabled
boolean
When true, prevents the user from interacting with the toggle group and all its items.
​
rovingFocus
boolean
default:"true"
When false, prevents automatic focus cycling through items.
​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the component.
​
dir
'ltr' | 'rtl'
The reading direction of the toggle group.
​
loop
boolean
default:"true"
When loop and rovingFocus are true, keyboard navigation will loop.

​
ToggleItem

An item in the toggle group.
​
value
string
required
A unique value for the item.
​
disabled
boolean
When true, prevents the user from interacting with the item.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Separator

Used to visually separate items in the toolbar.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Example

import * as Toolbar from '@radix-ui/react-toolbar';
import {
  FontBoldIcon,
  FontItalicIcon,
  UnderlineIcon,
} from '@radix-ui/react-icons';
import './styles.css';

export default () => (
  <Toolbar.Root className="ToolbarRoot" aria-label="Formatting options">
    <Toolbar.Button className="ToolbarButton">Undo</Toolbar.Button>
    <Toolbar.Button className="ToolbarButton">Redo</Toolbar.Button>
    <Toolbar.Separator className="ToolbarSeparator" />
    <Toolbar.ToggleGroup type="multiple" aria-label="Text formatting">
      <Toolbar.ToggleItem className="ToolbarToggleItem" value="bold" aria-label="Bold">
        <FontBoldIcon />
      </Toolbar.ToggleItem>
      <Toolbar.ToggleItem className="ToolbarToggleItem" value="italic" aria-label="Italic">
        <FontItalicIcon />
      </Toolbar.ToggleItem>
      <Toolbar.ToggleItem className="ToolbarToggleItem" value="underline" aria-label="Underline">
        <UnderlineIcon />
      </Toolbar.ToggleItem>
    </Toolbar.ToggleGroup>
    <Toolbar.Separator className="ToolbarSeparator" />
    <Toolbar.Link className="ToolbarLink" href="#" target="_blank">
      Help
    </Toolbar.Link>
  </Toolbar.Root>
);

​
Accessibility

Uses roving tabindex to manage focus movement among items.

​
Keyboard Interactions

  • Tab - Moves focus to the first item in the toolbar.
  • ArrowRight - Moves focus to the next item in the toolbar (in horizontal orientation).
  • ArrowLeft - Moves focus to the previous item in the toolbar (in horizontal orientation).
  • ArrowDown - Moves focus to the next item in the toolbar (in vertical orientation).
  • ArrowUp - Moves focus to the previous item in the toolbar (in vertical orientation).
  • Home - Moves focus to the first item.
  • End - Moves focus to the last item.

Build docs developers (and LLMs) love

Get started for freeTalk to us