sl-design-system
[V1] Toolbar
Toolbar
A toolbar is a UI component that groups related controls—such as buttons, menus, or inputs—into a single, accessible container to provide quick, contextual access to actions.
Toolbars may change based on what the user is doing or what is selected. For example, in a document editor, text formatting options appear only when text is selected. This dynamic behaviour keeps the UI focused and relevant.
Elements
- Controls: Individual interactive elements such as buttons, toggle buttons, toggle groups, or selects. They trigger actions or change settings directly from the toolbar.
- Groups: Logical clusters of related controls, used to organize the toolbar visually and functionally. Groups improve clarity and help manage layout and overflow behavior.
- Overflow Menu: A hidden menu that appears when the toolbar runs out of space. It contains controls or groups that couldn’t be displayed and preserves their order and grouping using dividers or labels.
Variants
Behaviours
Groups Related Controls: Controls are organized into logical groups to improve scannability and usability. When space is limited, groups help determine how items collapse into the overflow menu. In the dropdown, each group is visually separated with dividers to preserve structure and clarity.
Supports Keyboard Navigation: Users should be able to navigate the toolbar using arrow keys (← or →), and use space or enter to interact with the controls. Tab and Shift+Tab move focus in and out of the toolbar, not between each item. Optionally, Home and End keys can jump to the first and last controls. This behaviour supports accessibility and efficient keyboard use. When the toolbar receives focus, it should place it on the first interactive control.
Handles Overflow: When horizontal space is limited, toolbar items should collapse into an overflow menu. This keeps all the controls available on small screens or tiny layouts.
Provides Assistive Descriptions: If toolbar buttons use only icons, ensure they include descriptive tooltips or aria-label for screen readers. This ensures the actions are understandable to all users, regardless of visual ability or language fluency.
Follows Accessibility Roles: The toolbar container should have role="toolbar" to indicate its function to assistive technologies.
Toolbar Research on Figma LINK
Out of Scope
Advance Responsively: Toolbar items will collapse into an overflow menu, which hides the controls when there isn't space. If there are controls with labels and groups of controls. Give the designer the possibility to prioritise actions:
- Prioritise Controls: Grouping controls and giving a scale value (1, 2, 3...) provide a way to collapse into the overflow menu. This maintains functionality across different screen sizes and layouts based on the relevance of the actions.
- Collapse Labels: When there is controls that have labels, this can be hide give more visibility to the controls before collapse into the overflow menu.
Tasks
- [x] https://github.com/sl-design-system/components/issues/1586
- [ ] #1918
- [ ] [Toolbar] Development
- [ ] [Toolbar] Documentation
@arecuenco-dsgn Looks great! The only thing i'm missing here is what the overflow menu looks like. So vertical separators between groups of menu items etc.
Should we have an icon only variant, just like we have for the button bar, with smaller gaps?
