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

Description	Property 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

Description	Defines if the toolbar overflow popup should close upon interaction with the item. It will close by default.
Type	boolean
Default	false

Slots

default

Description	Wrapped component slot.
Type	Array<IOverflowToolbarItem>
Since	2.20.0

Events

close-overflow

Description	Fired when the overflow popover is closed.
Type	CustomEvent
Since	1.17.0
Bubbles	Yes
Cancelable	Yes - via preventDefault()

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

For more information on how to use CSS custom states, see Usage of CSS Custom States.

Name	Description
overflowed	When 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.