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.

Grouped Overflow​

Items that share the same non-empty overflowGroup string are treated as one atomic unit during overflow distribution: when any member must move into the overflow popover, all members move together. The visible bar always preserves slot order; the group becomes adjacent only inside the popover. See the overflowGroup property on ToolbarItemBase for the full contract.

Keyboard Handling​

The ui5-toolbar provides advanced keyboard handling.

  • [Left]/[Right] - navigate among toolbar items
  • [Home]/[End] - move to first/last toolbar item
  • [Tab] / [Shift]+[Tab] - exit the toolbar

ES6 Module Import​

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

Basic Sample​

Properties​

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Note: It is strongly recommended to always set this property or accessibleNameRef when the toolbar has role="toolbar" (i.e. when it contains more than one interactive item). Without an accessible name, screen readers will announce the toolbar without any context, making it harder for keyboard-only and AT users to understand its purpose.
Typestring | undefined
Defaultundefined

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the input.
Note: When the toolbar has role="toolbar", at least one of accessibleName or accessibleNameRef should be provided to satisfy WCAG 2.1 success criterion 4.1.2.
Typestring | undefined
Defaultundefined

alignContent​

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

design​

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

overflowButtonAccessibleName​

DescriptionDefines the accessible ARIA name of the overflow button of the component.
Note: When not set, the built-in translation for "Additional Options" is used.
Typestring | undefined
Defaultundefined
Since2.22.0

Slots​

default​

DescriptionDefines the items of the component.
Note: Use ui5-toolbar-button, ui5-toolbar-select, ui5-toolbar-separator and ui5-toolbar-spacer for the most common toolbar actions. To place any other UI5 Web Component into the toolbar and have it participate in overflow handling, wrap it in a ui5-toolbar-item.
TypeArray<ToolbarItemBase>

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.

CSS Custom States​

No CSS custom states 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

Grouped Overflow​

Items that share the same non-empty overflow-group string overflow together as one atomic unit — either all visible in the bar or all in the overflow popover, never split. The value is a free-form string label.