Toolbar

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

View code

Features

Full keyboard navigation.

Installation

Install the component from your command line.

$ npm add reka-ui

Anatomy

Import the component.

vue

<script setup lang="ts">
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'reka-ui'
</script>

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

API Reference

Root

Contains all the toolbar component parts.

Prop	Default	Type
`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. Read our Composition guide for more details.
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. 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

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

Button

A button item.

Prop	Default	Type
`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. Read our Composition guide for more details.
`disabled`		`boolean`

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

Link

A link item.

Prop	Default	Type
`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. Read our Composition guide for more details.

ToggleGroup

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

Prop	Default	Type
`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. Read our Composition guide for more details.
`defaultValue`		`AcceptableValue \| AcceptableValue[]` The default active value of the item(s). 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. 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). 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. This prop will overwrite the inferred type from `modelValue` and `defaultValue`.

Emit	Payload
`update:modelValue`	`[payload: AcceptableValue \| AcceptableValue[]]` Event handler called when the value of the toggle changes.

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

ToggleItem

An item in the group.

Prop	Default	Type
`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. Read our Composition guide for more details.
`defaultValue`		`boolean` The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.
`disabled`		`boolean` When `true`, prevents the user from interacting with the toggle.
`modelValue`		`boolean \| null` The controlled pressed state of the toggle. Can be bind as `v-model`.
`value*`		`AcceptableValue` A string value for the toggle group item. All items within a toggle group should use a unique value.

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

Prop	Default	Type
`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. Read our Composition guide for more details.

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.

Here is an example using our DropdownMenu primitive.

vue

<script setup lang="ts">
import {
  DropdownMenuContent,
  DropdownMenuRoot,
  DropdownMenuTrigger,
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'reka-ui'
</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 to manage focus movement among items.

Keyboard Interactions

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

Toolbar ​

Features ​

Installation ​

Anatomy ​

API Reference ​

Root ​

Button ​

Link ​

ToggleGroup ​

ToggleItem ​

Separator ​

Examples ​

Use with other primitives ​

Accessibility ​

Keyboard Interactions ​