A toolbar is a flexible container that can hold various other components.

Toolbar – live example

When to Use

Use the toolbar:

• For buttons with an icon or text.
• For user input elements.

Anatomy

1. Toolbar: Contains all toolbar elements.
2. Content: Any toolbar elements that can be placed inside the toolbar.
3. Spacer: Can be used to create space between groups of elements. It can either be a fixed value, or take up all remaining space.
4. Separator: Separates two groups of elements without affecting their position.
5. Overflow menu: Contains remaining toolbar elements that cannot be displayed due to limited space.

Variants

Toolbar with spacer – live example

Toolbar with separator – live example

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.

Toolbar items can move to the overflow (“AlwaysOverflow”) – live example

Toolbar items that never move to the overflow (“NeverOverflow”) – live example

Related Links