Skip to main content

Toolbar

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

Features

  • Full keyboard navigation
  • Can be controlled or uncontrolled
  • Horizontal or vertical orientation

API Reference

createToolbar

The builder function used to create the toolbar component.

Props

Prop Default Type / Description
loop false
boolean

Whether or not the focus should loop back to the first item when the last item is reached.

orientation 'horizontal'
'horizontal' | 'vertical'

The orientation of the toolbar.

Elements

Element Description

The builder store used to create the toolbar root.

The builder store used to create the toolbar button.

The builder store used to create the toolbar link.

The builder store used to create the toolbar separator.

Builders

Builder Description

A builder function that creates a toolbar group.

Options

Option Description
loop

Whether or not the focus should loop back to the first item when the last item is reached.

orientation

The orientation of the toolbar.

root

The root toolbar element.

Data Attributes

Data Attribute Value
[data-orientation]

'vertical' | 'horizontal'

[data-melt-toolbar]

Present on all toolbar elements.

button

The toolbar button element.

Data Attributes

Data Attribute Value
[data-melt-toolbar-button]

Present on all toolbar button elements.

Custom Events

Event Value
m-keydown (e: ) => void

The toolbar link element.

Data Attributes

Data Attribute Value
[data-melt-toolbar-link]

Present on all toolbar link elements.

Custom Events

Event Value
m-keydown (e: ) => void

separator

The toolbar separator element.

Data Attributes

Data Attribute Value
[data-orientation]

'vertical' | 'horizontal'

[data-melt-toolbar-separator]

Present on all toolbar separator elements.

createToolbarGroup

The builder function used to create the toolbar group component.

Props

Prop Default Type / Description
disabled false
boolean

Whether or not the toolbar group is disabled.

type 'single'
'single' | 'multiple'

The type of toolbar group. A single group can only have one item selected at a time. A multiple group can have multiple items selected at a time.

defaultValue -
string | string[] | undefined

The value of the default selected item(s).

value -
Writable<string | string[] | undefined>

A writable store that can be used to update the toolbar group value.

See Bring Your Own Store

onValueChange -
ChangeFn<string | string[] | undefined>

A callback function that is called when the toolbar group value changes.

See Change Functions

Elements

Element Description

The builder store used to create the toolbar group root.

The builder store used to create the toolbar group item.

States

State Description
value

A Writable store that returns the current value of the toolbar group.

Helpers

Helper Description
isPressed

A derived store that returns a function that can be used to check if an item is pressed.

Options

Option Description
disabled

Whether or not the toolbar group is disabled.

type

The type of toolbar group. A single group can only have one item selected at a time. A multiple group can have multiple items selected at a time.

group

The root toolbar element for a toolbar group.

Data Attributes

Data Attribute Value
[data-orientation]

'vertical' | 'horizontal'

[data-melt-toolbar-group]

Present on all toolbar group elements.

item

A an item within a toolbar group.

Props

Prop Default Type / Description
value * -
string

The value of the item.

disabled false
boolean

Whether or not the item is disabled.

Data Attributes

Data Attribute Value
[data-orientation]

'vertical' | 'horizontal'

[data-melt-toolbar-item]

Present on all toolbar item elements.

[data-disabled]

Present when the item is disabled.

[data-state]

'on' | 'off'

Custom Events

Event Value
m-click (e: ) => void
m-keydown (e: ) => void

Accessibility

Adheres to the Toolbar WAI-ARIA design pattern

Key Behavior
Tab

Moves focus to the first item in the group.

Space

Toggles the state of the focused item.

Enter

Toggles the state of the focused 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.