# Toolbar

```tsx
import { Toolbar } from '@tangible/ui';
```

Interactive docs and examples: [Toolbar in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/components-toolbar--docs).

## Toolbar props

| Prop | Type | Default | Description |
| - | - | - | - |
| `aria-label?` | `string` | | Accessible label for the toolbar (required for a11y) |
| `aria-labelledby?` | `string` | | ID of element that labels the toolbar |
| `children?` | `ReactNode` | | |
| `className?` | `string` | | |
| `loop?` | `boolean` | `true` | Whether arrow keys wrap from end to start (does not affect Home/End) |
| `orientation?` | `"horizontal" \| "vertical"` | `'horizontal'` | Toolbar orientation - affects arrow key direction |
| `style?` | `React.CSSProperties` | | Inline styles for layout integration |

### Toolbar.Group

| Prop | Type | Default | Description |
| - | - | - | - |
| `aria-label?` | `string` | | Accessible label for the group (only adds role="group" if provided) |
| `aria-labelledby?` | `string` | | ID of element that labels the group |
| `children?` | `ReactNode` | | |
| `className?` | `string` | | |

### Toolbar.Item

| Prop | Type | Default | Description |
| - | - | - | - |
| `children` | `ReactElement` | | The focusable element to register as a toolbar item |

## Examples

- [With Disabled Items](https://storybook-tangible-ui.pages.dev/?path=/story/components-toolbar--with-disabled-items): Disabled items are skipped during keyboard navigation.

- [Vertical Orientation](https://storybook-tangible-ui.pages.dev/?path=/story/components-toolbar--vertical-orientation): In vertical orientation, Up/Down arrows navigate instead of Left/Right.

- [Keyboard Navigation](https://storybook-tangible-ui.pages.dev/?path=/story/components-toolbar--keyboard-navigation): **Keyboard controls:**
  - **Tab**: Enter/exit toolbar (lands on last-focused item)
  - **Arrow Left/Right** (horizontal): Move between items
  - **Arrow Up/Down** (vertical): Move between items
  - **Home**: Jump to first item
  - **End**: Jump to last item
  Disabled items are skipped. Items inside groups are part of the same navigation sequence.

Other stories: Playground, Course Navigation (LMS), With Groups, With Input Element, No Loop, Mixed Content ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/components-toolbar--docs)).

## Component API tokens

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.

- `--tui-toolbar-gap`
- `--tui-toolbar-padding`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/components-toolbar--docs