Skip to main content
A container for grouping a set of controls such as buttons, toggle groups, or menus. Toolbars provide a convenient way to organize related actions and maintain keyboard navigation between controls.

​
Import

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

​
Basic Usage

<Toolbar.Root>
  <Toolbar.Button>Bold</Toolbar.Button>
  <Toolbar.Button>Italic</Toolbar.Button>
  <Toolbar.Button>Underline</Toolbar.Button>
  <Toolbar.Separator />
  <Toolbar.Button>Align Left</Toolbar.Button>
  <Toolbar.Button>Align Center</Toolbar.Button>
  <Toolbar.Button>Align Right</Toolbar.Button>
</Toolbar.Root>

​
Key Components

​
Toolbar.Root

A container for grouping a set of controls. Renders a <div> element. Key Props:
  • orientation: 'horizontal' | 'vertical' - The orientation of the toolbar (default: 'horizontal')
  • disabled: boolean - Whether the whole toolbar is disabled (default: false)
  • loopFocus: boolean - If true, keyboard navigation will wrap focus to the other end of the toolbar once the end is reached (default: true)
State:
  • data-orientation: 'horizontal' | 'vertical' - The orientation of the toolbar
  • data-disabled: Present when the toolbar is disabled

​
Toolbar.Button

A button within the toolbar. Renders a <button> element. Key Props:
  • disabled: boolean - Whether the button is disabled
State:
  • data-disabled: Present when the button is disabled

​
Toolbar.Link

A link within the toolbar. Renders an <a> element. Key Props:
  • href: string - The URL the link points to

​
Toolbar.Input

An input field within the toolbar. Renders an <input> element. Key Props:
  • Standard input props like type, value, onChange, etc.

​
Toolbar.Group

Groups related toolbar items together. Renders a <div> element.

​
Toolbar.Separator

A visual separator between toolbar items. Renders a <div> element. State:
  • data-orientation: Reflects the parent toolbar’s orientation

​
Features

  • Keyboard navigation with arrow keys
  • Support for horizontal and vertical orientations
  • Grouping of related controls
  • Visual separators
  • Loop focus option
  • Accessible ARIA attributes (role="toolbar")
  • Support for buttons, links, and inputs

​
Styling Example

.ToolbarRoot {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.ToolbarRoot[data-orientation="vertical"] {
  flex-direction: column;
}

.ToolbarButton {
  padding: 6px 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
}

.ToolbarButton:hover {
  background: #e5e5e5;
}

.ToolbarButton[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ToolbarSeparator {
  width: 1px;
  background: #ddd;
  margin: 0 4px;
}

.ToolbarSeparator[data-orientation="vertical"] {
  width: auto;
  height: 1px;
  margin: 4px 0;
}

.ToolbarGroup {
  display: flex;
  gap: 2px;
}

​
Common Patterns

​
Text Editor Toolbar

<Toolbar.Root>
  <Toolbar.Group>
    <Toolbar.Button aria-label="Bold">B</Toolbar.Button>
    <Toolbar.Button aria-label="Italic">I</Toolbar.Button>
    <Toolbar.Button aria-label="Underline">U</Toolbar.Button>
  </Toolbar.Group>
  
  <Toolbar.Separator />
  
  <Toolbar.Group>
    <Toolbar.Button aria-label="Align left">←</Toolbar.Button>
    <Toolbar.Button aria-label="Align center">↔</Toolbar.Button>
    <Toolbar.Button aria-label="Align right">→</Toolbar.Button>
  </Toolbar.Group>
  
  <Toolbar.Separator />
  
  <Toolbar.Group>
    <Toolbar.Button aria-label="Link">🔗</Toolbar.Button>
    <Toolbar.Button aria-label="Image">🖼</Toolbar.Button>
  </Toolbar.Group>
</Toolbar.Root>

​
Vertical Toolbar

<Toolbar.Root orientation="vertical">
  <Toolbar.Button aria-label="Home">Home</Toolbar.Button>
  <Toolbar.Button aria-label="Search">Search</Toolbar.Button>
  <Toolbar.Button aria-label="Settings">Settings</Toolbar.Button>
  <Toolbar.Separator />
  <Toolbar.Button aria-label="Profile">Profile</Toolbar.Button>
  <Toolbar.Button aria-label="Logout">Logout</Toolbar.Button>
</Toolbar.Root>

​
With Input Fields

<Toolbar.Root>
  <Toolbar.Button aria-label="Font family">Font</Toolbar.Button>
  <Toolbar.Input 
    type="number" 
    min="8" 
    max="72" 
    defaultValue="16"
    aria-label="Font size"
  />
  <Toolbar.Separator />
  <Toolbar.Button aria-label="Bold">B</Toolbar.Button>
  <Toolbar.Button aria-label="Italic">I</Toolbar.Button>
</Toolbar.Root>

​
Disabled Toolbar

const [disabled, setDisabled] = React.useState(false);

<>
  <button onClick={() => setDisabled(!disabled)}>
    Toggle toolbar
  </button>
  
  <Toolbar.Root disabled={disabled}>
    <Toolbar.Button>Action 1</Toolbar.Button>
    <Toolbar.Button>Action 2</Toolbar.Button>
    <Toolbar.Button>Action 3</Toolbar.Button>
  </Toolbar.Root>
</>

​
With Links

<Toolbar.Root>
  <Toolbar.Link href="/dashboard">Dashboard</Toolbar.Link>
  <Toolbar.Separator />
  <Toolbar.Link href="/projects">Projects</Toolbar.Link>
  <Toolbar.Separator />
  <Toolbar.Link href="/team">Team</Toolbar.Link>
  <Toolbar.Separator />
  <Toolbar.Button>Settings</Toolbar.Button>
</Toolbar.Root>

​
Application Toolbar

<Toolbar.Root className="AppToolbar">
  <Toolbar.Group>
    <Toolbar.Button aria-label="New file">New</Toolbar.Button>
    <Toolbar.Button aria-label="Open file">Open</Toolbar.Button>
    <Toolbar.Button aria-label="Save file">Save</Toolbar.Button>
  </Toolbar.Group>
  
  <Toolbar.Separator />
  
  <Toolbar.Group>
    <Toolbar.Button aria-label="Undo">Undo</Toolbar.Button>
    <Toolbar.Button aria-label="Redo">Redo</Toolbar.Button>
  </Toolbar.Group>
  
  <Toolbar.Separator />
  
  <Toolbar.Group>
    <Toolbar.Button aria-label="Cut">Cut</Toolbar.Button>
    <Toolbar.Button aria-label="Copy">Copy</Toolbar.Button>
    <Toolbar.Button aria-label="Paste">Paste</Toolbar.Button>
  </Toolbar.Group>
</Toolbar.Root>