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
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] |
|
[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] |
|
[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 |
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. |
onValueChange | - | ChangeFn<string | string[] | undefined> A callback function that is called when the toolbar group value changes. See Change Functions |
Elements
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 |
group
The root toolbar element for a toolbar group.
Data Attributes
Data Attribute | Value |
[data-orientation] |
|
[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] |
|
[data-melt-toolbar-item] | Present on all toolbar item elements. |
[data-disabled] | Present when the item is disabled. |
[data-state] |
|
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 |
ArrowRight | Moves focus to the next item depending on |
ArrowUp | Moves focus to the previous item depending on |
ArrowLeft | Moves focus to the previous item depending on |
Home | Moves focus to the first item. |
End | Moves focus to the last item. |
On This Page