# Toolbar · HeroUI

> A container for interactive controls with arrow key navigation.

- Page: https://jiguang132.com/systems/heroui/docs/components/toolbar
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Import

```tsx
import { Toolbar } from '@heroui/react';
```

### Usage


> Example `toolbar-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/toolbar


### Vertical


> Example `toolbar-vertical`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/toolbar


### With ButtonGroup


> Example `toolbar-with-button-group`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/toolbar


### Attached


> Example `toolbar-attached`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/toolbar


## Styling

### Passing Tailwind CSS classes

```tsx
import { Toolbar } from '@heroui/react';

function CustomToolbar() {
  return (
    <Toolbar
      aria-label="Actions"
      className="rounded-xl border border-default bg-surface p-2"
    >
      {/* toolbar content */}
    </Toolbar>
  );
}
```

### Customizing the component classes

To customize the Toolbar component classes, you can use the `@layer components` directive.
  
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

```css
@layer components {
  .toolbar {
    @apply gap-4 rounded-lg bg-surface p-3;
  }
}
```

HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize.

### CSS Classes

The Toolbar component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/toolbar.css)):

- `.toolbar` - Base container
- `.toolbar--horizontal` - Horizontal orientation (default)
- `.toolbar--vertical` - Vertical orientation
- `.toolbar--attached` - Attached variant with surface background and full rounding

## API Reference

### Toolbar Props

Inherits from [React Aria Toolbar](https://react-spectrum.adobe.com/react-aria/Toolbar.html).

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `isAttached` | `boolean` | `false` | Whether the toolbar has a surface background with full rounding |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | The orientation of the toolbar |
| `aria-label` | `string` | - | An accessible label for the toolbar |
| `aria-labelledby` | `string` | - | The id of an element that labels the toolbar |
| `children` | `React.ReactNode \| (values: ToolbarRenderProps) => React.ReactNode` | - | Content or render prop |
| `className` | `string \| (values: ToolbarRenderProps) => string` | - | Additional CSS classes |

### ToolbarRenderProps

When using the render prop pattern, these values are provided:

| Prop | Type | Description |
|------|------|-------------|
| `orientation` | `"horizontal" \| "vertical"` | The current orientation of the toolbar |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt