Skip to main content

Toolbar

<ui5-toolbar> | Since 1.17.0

The ui5-toolbar component is used to create a horizontal layout with items. The items can be overflowing in a popover, when the space is not enough to show all of them.

Keyboard Handling​

The ui5-toolbar provides advanced keyboard handling.

  • The control is not interactive, but can contain of interactive elements
  • [Tab] - iterates through elements

ES6 Module Import​

import "@ui5/webcomponents/dist/Toolbar.js";

Basic Sample​

Properties​

alignContent​

DescriptionIndicated the direction in which the Toolbar items will be aligned.
Type"Start" | "End" (value descriptions in: ToolbarAlign)
Default"End"

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the input.
Typestring | undefined
Defaultundefined

design​

DescriptionDefines the toolbar design.
Type"Solid" | "Transparent" (value descriptions in: ToolbarDesign)
Default"Solid"
Since2.0.0

Slots​

default​

DescriptionDefines the items of the component.
Note: Currently only ui5-toolbar-button, ui5-toolbar-select, ui5-toolbar-separator and ui5-toolbar-spacer are allowed here.
TypeArray<ToolbarItem>

Events​

No events available for this component.

Methods​

isOverflowOpen​

DescriptionReturns if the overflow popup is open.
Return typeboolean

CSS Parts​

No CSS parts available for this component.

More Samples​

Always Overflowing Items​

To force items into the overflow, set "overflow-priority='AlwaysOverflow'" on the Toolbar items.

Never Overflowing Items​

To force items staying always visible and never overflow, set "overflow-priority='NeverOverflow'" on the Toolbar items.

Spacers and Separators​

Items Alignment​

You can align items to the Start, or to the End via the "align-content" property

ToolbarItem​

ToolbarItem wrapper used to add any component to Toolbar