Intro
A toolbar is a flexible container that can hold various other components.
https://www.sap.com/design-system/live-examples/Toolbar/Toolbar_LE.html
Toolbar – live example
When to Use
Do
Use the toolbar:
- For buttons with an icon or text.
- For user input elements.
Anatomy
- Toolbar: Contains all toolbar elements.
- Content: Any toolbar elements that can be placed inside the toolbar.
- Spacer: Can be used to create space between groups of elements. It can either be a fixed value, or take up all remaining space.
- Separator: Separates two groups of elements without affecting their position.
- Overflow menu: Contains remaining toolbar elements that cannot be displayed due to limited space.
Anatomy of a toolbar
Types
The toolbar elements can be aligned left (“Start”) or right (“End”) and used in conjunction with separators or spacers.
With Spacer
https://www.sap.com/design-system/live-examples/Toolbar/Toolbar_withspacer_LE.html
Toolbar with spacer – live example
With Separator
https://www.sap.com/design-system/live-examples/Toolbar/Toolbar_LE.html
Toolbar with separator – live example
Left-Aligned
https://www.sap.com/design-system/live-examples/Toolbar/Toolbar_start_LE.html
Toolbar aligned left (“Start”) – live example
Responsive Behavior
Overflow
The toolbar’s overflow behavior can transition action elements into a popover when there is not enough space.
You can specify which elements can move into the overflow (overflow priority “AlwaysOverflow”) and which elements always stay on the toolbar (overflow priority “NeverOverflow”). This ensures that the most important toolbar elements remain when the screen size decreases.
https://www.sap.com/design-system/live-examples/Toolbar/Toolbar_alwaysoverflow_LE.html
Toolbar items can move to the overflow (“AlwaysOverflow”) – live example
https://www.sap.com/design-system/live-examples/Toolbar/Toolbar_neveroverflow_LE.html
Toolbar items that never move to the overflow (“NeverOverflow”) – live example