Skip to main content

ToolbarItem

<ui5-toolbar-item> | Since 1.17.0

The ui5-toolbar-item is a wrapper component used to integrate UI5 Web Components into the ui5-toolbar. It renders within the toolbar's shadow DOM and manages the lifecycle and overflow behavior of its child component.

Structure​

The toolbar item wraps a single UI5 Web Component (such as CheckBox, Title, etc.) and handles:

  • Overflow management (determining if the item should be displayed in the main toolbar or overflow popover)
  • Automatic popover closing on interaction
  • CSS custom state exposure for styling based on overflow state

Usage​

The ui5-toolbar-item is typically used implicitly when adding components to a toolbar, but specialized wrappers like ui5-toolbar-button provide component-specific functionality and should be preferred when available.

Properties​

overflowPriority​

DescriptionProperty used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
Type"Default" | "NeverOverflow" | "AlwaysOverflow" (value descriptions in: ToolbarItemOverflowBehavior)
Default"Default"

preventOverflowClosing​

DescriptionDefines if the toolbar overflow popup should close upon interaction with the item. It will close by default.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionWrapped component slot.
TypeArray<IOverflowToolbarItem>
Since2.20.0

Events​

close-overflow​

DescriptionFired when the overflow popover is closed.
TypeCustomEvent
Since1.17.0
BubblesYes
CancelableYes - via preventDefault()

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

CSS Custom States​

NameDescription
overflowedWhen the item is displayed in the overflow popover. Use this state to apply different styles when the item is overflowed. Available since 2.20.0.