Toolbar

Move through a compact set of related actions and invoke the active tool.

Usage

Group inline text formatting actions in their natural horizontal order.

<!-- Toolbar / Formatting -->
<script setup lang="ts">
import { ToolbarRoot, ToolbarItem, ToolbarSeparator } from '@sectile/vue/toolbar'
import { ref } from 'vue'

const items = ['bold', 'italic', 'link']
const lastAction = ref('')

</script>

<template>
  <ToolbarRoot :items="items" label="Text formatting" @invoke="lastAction = $event">
    <ToolbarItem value="bold"><strong>B</strong><span class="sr-only">Bold</span></ToolbarItem>
    <ToolbarItem value="italic"><em>I</em><span class="sr-only">Italic</span></ToolbarItem>
    <ToolbarSeparator />
    <ToolbarItem value="link">Link</ToolbarItem>
    </ToolbarRoot>
  <p v-if="lastAction" role="status">{{ lastAction }} applied</p>
</template>

Stack canvas tools vertically beside an editing surface.

<!-- Toolbar / Vertical -->
<script setup lang="ts">
import { ToolbarRoot, ToolbarItem, ToolbarSeparator } from '@sectile/vue/toolbar'
import { ref } from 'vue'

const items = ['select', 'comment', 'upload']
const activeTool = ref('select')

</script>

<template>
  <ToolbarRoot :items="items" orientation="vertical" label="Canvas tools" @invoke="activeTool = $event">
    <ToolbarItem value="select">Select</ToolbarItem>
    <ToolbarItem value="comment">Comment</ToolbarItem>
    <ToolbarSeparator />
    <ToolbarItem value="upload">Upload</ToolbarItem>
    </ToolbarRoot>
  <p role="status">Active tool: {{ activeTool }}</p>
</template>

Controlled focus

Let the parent coordinate the active toolbar item without changing keyboard rules.

<!-- Toolbar / Controlled Focus -->
<script setup lang="ts">
import { ToolbarRoot, ToolbarItem } from '@sectile/vue/toolbar'
import { ref } from 'vue'

const items = ['select', 'comment', 'upload']
const activeTool = ref('select')

</script>

<template>
  <ToolbarRoot v-model="activeTool" :items="items" label="Canvas tools">
    <ToolbarItem v-for="item in items" :key="item" :value="item">
      {{ item }}
    </ToolbarItem>
  </ToolbarRoot>
  <button type="button" @click="activeTool = 'comment'">Focus comment</button>
</template>

API

Vue package: @sectile/vue/toolbar

Components

ToolbarRoot
ToolbarItem
ToolbarSeparator

Props

`ToolbarRootProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
defaultValue: Typestring | nullDefaultnull
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
disabledItems: Typereadonly string[]Default[]
Item values excluded from focus and selection.
items: Typereadonly string[]DefaultRequired
Ordered item values managed by the component.
label: TypestringDefaultundefined
Accessible name announced for the control.
modelValue: Typestring | nullDefaultundefined
Current value when state is controlled by the parent.
orientation: Type'horizontal' | 'vertical'Default'horizontal'
Axis used for layout and keyboard movement.
policies: TypeToolbarPolicies<string>Defaultundefined
Behavior policies that customize validation, movement, or selection.

`ToolbarItemProps`

as: TypePrimitiveAsDefault'button'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
value: TypestringDefaultRequired
Current value exposed by this contract.

`ToolbarPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

Slots

`ToolbarRootSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
highlightedValue: Typestring | null
Value currently highlighted for interaction.
orientation: Type'horizontal' | 'vertical'
Current layout and movement axis.

`ToolbarItemSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
highlighted: Typeboolean
Whether this item is highlighted for interaction.
value: Typestring
Current value exposed by this contract.

Events

`ToolbarRoot`

invoke: Payloadstring
Emitted when the current action is invoked.
update:modelValue: Payloadstring | null
Emitted when the component requests a new controlled value.

Other types

`ToolbarValueChangeHandler`

type ToolbarValueChangeHandler = (value: string | null) => void

`ToolbarInvokeHandler`

type ToolbarInvokeHandler = (value: string) => void

Parts

Shared scope: [data-scope="toolbar"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Defines the component boundary and owns its composed parts.	—
`item`	`[data-part="item"]`	Represents one selectable or actionable item.	—
`separator`	`[data-part="separator"]`	Separates related groups without becoming an action.	—

Keyboard interaction

Key	Behavior
`Arrow keys`	Move between toolbar items in the configured orientation.
`Home` / `End`	Move to the first or last enabled item.
`Enter` / `Space`	Invoke the focused tool.

Accessibility

The labeled toolbar uses one roving tab stop and keeps separators out of the focus order.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Toolbar ​

Usage ​

Horizontal toolbar ​

Vertical toolbar ​

Controlled focus ​

API ​

Props ​

ToolbarRootProps ​

ToolbarItemProps ​

ToolbarPartProps ​

Slots ​

ToolbarRootSlotProps ​

ToolbarItemSlotProps ​

Events ​

ToolbarRoot ​

Other types ​

ToolbarValueChangeHandler ​

ToolbarInvokeHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​