Toolbar

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

Toolbar – live example

When to Use

Do

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.
Anatomy of a toolbar
Anatomy of a toolbar

Variants

The toolbar elements can be aligned left (“Start”) or right (“End”) and used in conjunction with separators or spacers.

With Spacer

Toolbar with spacer – live example

With Separator

Toolbar with separator – live example

Left-Aligned

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

Components

Implementation

  • Toolbar
    (UI5 Web Components documentation)