Toolbar

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.

'horizontal' | 'vertical'

default:"'horizontal'"

The orientation of the toolbar.

'ltr' | 'rtl'

The reading direction of the toolbar. If omitted, inherits from the parent.

boolean

default:"true"

When true, keyboard navigation will loop from last item to first, and vice versa.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Button

A button item.

boolean

When true, prevents the user from interacting with the button.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Link

A link item.

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.

'single' | 'multiple'

required

Determines whether a single or multiple items can be pressed at a time.

When type="single":

string

The controlled value of the pressed item.

string

The value of the item to show as pressed when initially rendered (uncontrolled).

(value: string) => void

Event handler called when the pressed state changes.

When type="multiple":

string[]

The controlled value of the pressed items.

string[]

The values of the items to show as pressed when initially rendered (uncontrolled).

(value: string[]) => void

Event handler called when the pressed state changes.

Common props:

boolean

When true, prevents the user from interacting with the toggle group and all its items.

boolean

default:"true"

When false, prevents automatic focus cycling through items.

'horizontal' | 'vertical'

default:"'horizontal'"

The orientation of the component.

'ltr' | 'rtl'

The reading direction of the toggle group.

boolean

default:"true"

When loop and rovingFocus are true, keyboard navigation will loop.

ToggleItem

An item in the toggle group.

string

required

A unique value for the item.

boolean

When true, prevents the user from interacting with the item.

boolean

default:"false"

Change the default rendered element for the one passed as a child.

Separator

Used to visually separate items in the toolbar.

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>
);

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

export default () => (
  <Toolbar.Root orientation="vertical" aria-label="Formatting options">
    <Toolbar.Button>Cut</Toolbar.Button>
    <Toolbar.Button>Copy</Toolbar.Button>
    <Toolbar.Button>Paste</Toolbar.Button>
  </Toolbar.Root>
);

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

export default () => {
  const [alignment, setAlignment] = useState('left');

  return (
    <Toolbar.Root>
      <Toolbar.ToggleGroup
        type="single"
        value={alignment}
        onValueChange={(value) => value && setAlignment(value)}
      >
        <Toolbar.ToggleItem value="left">Left</Toolbar.ToggleItem>
        <Toolbar.ToggleItem value="center">Center</Toolbar.ToggleItem>
        <Toolbar.ToggleItem value="right">Right</Toolbar.ToggleItem>
      </Toolbar.ToggleGroup>
    </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.

Overlays

Navigation

Forms

Layout

Data Display

Utilities

Overview

Features

Installation

Anatomy

API Reference

Root

Button

Link

ToggleGroup

ToggleItem

Separator

Example

Accessibility

Keyboard Interactions

​Overview

​Features

​Installation

​Anatomy

​API Reference

​Root

​Button

​Link

​ToggleGroup

​ToggleItem

​Separator

​Example

​Accessibility

​Keyboard Interactions

Overview

Features

Installation

Anatomy

API Reference

Root

Button

Link

ToggleGroup

ToggleItem

Separator

Example

Accessibility

Keyboard Interactions