Toolbar

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

View code

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
`root`	The builder store used to create the toolbar root.
`button`	The builder store used to create the toolbar button.
`link`	The builder store used to create the toolbar link.
`separator`	The builder store used to create the toolbar separator.

Builders

Builder	Description
`createToolbarGroup`	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`

link

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
`root`	The builder store used to create the toolbar group root.
`item`	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.

On This Page