> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Toolbar

> A container for grouping a set of controls such as buttons, toggle groups, or menus.

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

```tsx theme={null}
import * as Toolbar from '@base-ui/react/Toolbar';
```

## Basic Usage

```tsx theme={null}
<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

```css theme={null}
.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

```tsx theme={null}
<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

```tsx theme={null}
<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

```tsx theme={null}
<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

```tsx theme={null}
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

```tsx theme={null}
<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

```tsx theme={null}
<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>
```