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

Props

Prop	Default	Type / Description
`loop`	`true`	`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.

Returned Props

Returned Prop	Type	Description
`options`	`Writable<CreateToolbarProps>`	A writable store that can be used to update the toolbar props.
`createToolbarGroup`	-	A builder function that creates a toolbar group.
`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.

root

Data Attributes

Data Attribute	Value
`[data-orientation]`	`'vertical' \| 'horizontal'`
`[data-melt-toolbar]`	Present on all toolbar elements.

button

Data Attributes

Data Attribute	Value
`[data-melt-toolbar-button]`	Present on all toolbar button elements.

link

Data Attributes

Data Attribute	Value
`[data-melt-toolbar-link]`	Present on all toolbar link elements.

separator

Data Attributes

Data Attribute	Value
`[data-orientation]`	`'vertical' \| 'horizontal'`
`[data-melt-toolbar-separator]`	Present on all toolbar separator elements.

createToolbarGroup

Props

Prop	Default	Type / Description
`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.
`value`	-	`string \| string[] \| null` The value of the selected item(s).
`disabled`	`false`	`boolean` Whether or not the toolbar group is disabled.

Returned Props

Returned Prop	Type	Description
`options`	`Writable<CreateToolbarGroupProps>`	A writable store that can be used to update the toolbar group props.
`value`	`Writable<string \| string[] \| null>`	A writable store that can be used to update the toolbar group value.
`isPressed`	`Readable<(itemValue: string) => boolean>`	A derived store that returns a function that can be used to check if an item is pressed.
`root`	-	The builder store used to create the toolbar group root.
`item`	-	The builder store used to create the toolbar group item.

group

Data Attributes

Data Attribute	Value
`[data-orientation]`	`'vertical' \| 'horizontal'`
`[data-melt-toolbar-group]`	Present on all toolbar group elements.

groupItem

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'`

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