---
title: "Toolbar"
description: "A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus."
canonical_url: "https://vinicunca.dev/akar/components/toolbar"
---
# Toolbar

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

```vue [index.vue]
<script setup lang="ts">
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'akar'
import { ref } from 'vue'
import './styles.css'

const toggleStateSingle = ref('center')
const toggleStateMultiple = ref([])
</script>

<template>
  <div class="akar-demo akar-demo-Toolbar">
    <ToolbarRoot
        class="ToolbarRoot"
        aria-label="Formatting options"
      >
        <ToolbarToggleGroup
          v-model="toggleStateMultiple"
          type="multiple"
          aria-label="Text formatting"
        >
          <ToolbarToggleItem
            class="ToolbarToggleItem"
            value="bold"
            aria-label="Bold"
          >
            <PIcon name="i-lucide-bold" />
          </ToolbarToggleItem>
          <ToolbarToggleItem
            class="ToolbarToggleItem"
            value="italic"
            aria-label="Italic"
          >
            <PIcon name="i-lucide-italic" />
          </ToolbarToggleItem>
          <ToolbarToggleItem
            class="ToolbarToggleItem"
            value="strikethrough"
            aria-label="Strike through"
          >
            <PIcon name="i-lucide-strikethrough" />
          </ToolbarToggleItem>
        </ToolbarToggleGroup>
        <ToolbarSeparator class="ToolbarSeparator" />
        <ToolbarToggleGroup
          v-model="toggleStateSingle"
          type="single"
          aria-label="Text Alignment"
        >
          <ToolbarToggleItem
            class="ToolbarToggleItem"
            value="left"
            aria-label="Left Aligned"
          >
            <PIcon name="i-lucide-align-left" />
          </ToolbarToggleItem>
          <ToolbarToggleItem
            class="ToolbarToggleItem"
            value="center"
            aria-label="Center Aligned"
          >
            <PIcon name="i-lucide-align-center" />
          </ToolbarToggleItem>
          <ToolbarToggleItem
            class="ToolbarToggleItem"
            value="right"
            aria-label="Right Aligned"
          >
            <PIcon name="i-lucide-align-right" />
          </ToolbarToggleItem>
        </ToolbarToggleGroup>
        <ToolbarSeparator class="ToolbarSeparator" />
        <ToolbarLink
          class="ToolbarLink"
          href="#"
          target="_blank"
          style="margin-right: 10"
        >
          Edited 2 hours ago
        </ToolbarLink>
        <ToolbarButton
          class="ToolbarButton"
          style="margin-left: auto"
        >
          Share
        </ToolbarButton>
      </ToolbarRoot>
  </div>
</template>
```

```css [styles.css]
@import '../_colors/black-alpha.css';
@import '../_colors/mauve.css';
@import '../_colors/grass.css';

@scope (.akar-demo-Toolbar) {
/* reset */
a,
button {
  all: unset;
}

.ToolbarRoot {
  display: flex;
  padding: 10px;
  width: 100%;
  min-width: max-content;
  border-radius: 6px;
  background-color: white;
  box-shadow: 0 2px 10px var(--black-a7);
}

.ToolbarToggleItem,
.ToolbarLink,
.ToolbarButton {
  flex: 0 0 auto;
  color: var(--mauve-11);
  height: 25px;
  padding: 0 5px;
  border-radius: 4px;
  display: inline-flex;
  font-size: 13px;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
.ToolbarToggleItem:hover,
.ToolbarLink:hover,
.ToolbarButton:hover {
  background-color: var(--grass-3);
  color: var(--grass-11);
}
.ToolbarToggleItem:focus,
.ToolbarLink:focus,
.ToolbarButton:focus {
  position: relative;
  box-shadow: 0 0 0 2px var(--grass-7);
}

.ToolbarToggleItem {
  background-color: white;
  margin-left: 2px;
}
.ToolbarToggleItem:first-child {
  margin-left: 0;
}
.ToolbarToggleItem[data-state='on'] {
  background-color: var(--grass-5);
  color: var(--grass-11);
}

.ToolbarSeparator {
  width: 1px;
  background-color: var(--mauve-6);
  margin: 0 10px;
}

.ToolbarLink {
  background-color: transparent;
  color: var(--mauve-11);
  display: none;
  justify-content: center;
  align-items: center;
}
.ToolbarLink:hover {
  background-color: transparent;
  cursor: pointer;
}
@media (min-width: 520px) {
  .ToolbarLink {
    display: inline-flex;
  }
}

.ToolbarButton {
  padding-left: 10px;
  padding-right: 10px;
  color: white;
  background-color: var(--grass-9);
}
.ToolbarButton:hover {
  background-color: var(--grass-10);
  color: white;
}
}
```

## Features

- Full keyboard navigation.

## Installation

Install the component from your command line.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

## Anatomy

Import the component.

```vue
<script setup lang="ts">
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'akar';
</script>

<template>
  <ToolbarRoot>
    <ToolbarButton />
    <ToolbarSeparator />
    <ToolbarLink />
    <ToolbarToggleGroup>
      <ToolbarToggleItem />
    </ToolbarToggleGroup>
  </ToolbarRoot>
</template>
```

## API Reference

### Root

Contains all the toolbar component parts.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `dir` |  | `"ltr" \| "rtl"` | The reading direction of the combobox when applicable.<br><br>If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. |
| `loop` |  | `boolean` | When `true`, keyboard navigation will loop from last tab to first, and vice versa. |
| `orientation` | `"horizontal"` | `"vertical" \| "horizontal"` | The orientation of the toolbar |

[ToolbarRoot.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Toolbar/ToolbarRoot.vue)

| Data attribute | Value |
| --- | --- |
| `[data-orientation]` | "vertical" \\| "horizontal" |

### Button

A button item.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"button"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `disabled` |  | `boolean` |  |

[ToolbarButton.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Toolbar/ToolbarButton.vue)

| Data attribute | Value |
| --- | --- |
| `[data-orientation]` | "vertical" \\| "horizontal" |

### Link

A link item.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"a"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[ToolbarLink.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Toolbar/ToolbarLink.vue)

### ToggleGroup

A set of two-state buttons that can be toggled on or off.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `defaultValue` |  | `AcceptableValue \| AcceptableValue[]` | The default active value of the item(s).<br><br>Use when you do not need to control the state of the item(s). |
| `dir` |  | `"ltr" \| "rtl"` | The reading direction of the combobox when applicable.<br><br>If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. |
| `disabled` |  | `boolean` | When `true`, prevents the user from interacting with the toggle group and all its items. |
| `loop` |  | `boolean` | When `loop` and `rovingFocus` is `true`, keyboard navigation will loop from last item to first, and vice versa. |
| `modelValue` |  | `AcceptableValue \| AcceptableValue[]` | The controlled value of the active item(s).<br><br>Use this when you need to control the state of the items. Can be binded with `v-model` |
| `name` |  | `string` | The name of the field. Submitted with its owning form as part of a name/value pair. |
| `orientation` |  | `"vertical" \| "horizontal"` | The orientation of the component, which determines how focus moves: `horizontal` for left/right arrows and `vertical` for up/down arrows. |
| `required` |  | `boolean` | When `true`, indicates that the user must set the value before the owning form can be submitted. |
| `rovingFocus` |  | `boolean` | When `false`, navigating through the items using arrow keys will be disabled. |
| `type` |  | `"single" \| "multiple"` | Determines whether a "single" or "multiple" items can be selected at a time.<br><br>This prop will overwrite the inferred type from `modelValue` and `defaultValue`. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `update:modelValue` | `payload: AcceptableValue \| AcceptableValue[]` | Event handler called when the value changes. |

[ToolbarToggleGroup.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Toolbar/ToolbarToggleGroup.vue)

| Data attribute | Value |
| --- | --- |
| `[data-orientation]` | "vertical" \\| "horizontal" |

### ToggleItem

An item in the group.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `disabled` |  | `boolean` | When `true`, prevents the user from interacting with the toggle. |
| `value*` |  | `AcceptableValue` | A string value for the toggle group item. All items within a toggle group should use a unique value. |

[ToolbarToggleItem.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Toolbar/ToolbarToggleItem.vue)

| Data attribute | Value |
| --- | --- |
| `[data-state]` | "on" \\| "off" |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | "vertical" \\| "horizontal" |

### Separator

Used to visually separate items in the toolbar

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[ToolbarSeparator.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Toolbar/ToolbarSeparator.vue)

| Data attribute | Value |
| --- | --- |
| `[data-orientation]` | "vertical" \\| "horizontal" |

## Examples

### Use with other primitives

All our primitives which expose a `Trigger` part, such as `Dialog`, `AlertDialog`, `Popover`, `DropdownMenu` can be composed within a toolbar by using the [`asChild` prop](https://vinicunca.dev/akar/guides/composition).

Here is an example using our `DropdownMenu` primitive.

```vue
<script setup lang="ts">
import {
  DropdownMenuContent,
  DropdownMenuRoot,
  DropdownMenuTrigger,
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'akar'
</script>

<template>
  <ToolbarRoot>
    <ToolbarButton>Action 1</ToolbarButton>
    <ToolbarSeparator />
    <DropdownMenuRoot>
      <ToolbarButton as-child>
        <DropdownMenuTrigger>Trigger</DropdownMenuTrigger>
      </ToolbarButton>
      <DropdownMenuContent>…</DropdownMenuContent>
    </DropdownMenuRoot>
  </ToolbarRoot>
</template>
```

## Accessibility

Uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) to manage focus movement among items.

### Keyboard Interactions

| Key | Description |
| --- | --- |
| <kbd>Tab</kbd> | Moves focus to the first item in the group. |
| <kbd>Space</kbd> | Activates/deactivates the item. |
| <kbd>Enter</kbd> | Activates/deactivates the item. |
| <kbd>ArrowDown</kbd> |  Moves focus to the next item depending on `orientation`. |
| <kbd>ArrowRight</kbd> |  Moves focus to the next item depending on `orientation`. |
| <kbd>ArrowUp</kbd> |  Moves focus to the previous item depending on `orientation` . |
| <kbd>ArrowLeft</kbd> |  Moves focus to the previous item depending on `orientation` . |
| <kbd>Home</kbd> | Moves focus to the first item. |
| <kbd>End</kbd> | Moves focus to the last item. |

---

- [ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar)
- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Toolbar)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.