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
overflowGroup
| Description | Co-overflow tag. Items in the same ui5-toolbar whose overflowGroup is the same non-empty string overflow as one atomic unit: either all visible in the bar, or all in the overflow popover, never split. The empty string (the default) means "no group" — the item participates in overflow independently.
The tag is a free-form, case-sensitive string label (e.g. "filters", "search"). It is layout-only and carries no ARIA, keyboard, or visual-cluster semantics. Items in a non-empty group must have overflowPriority = "Default"; AlwaysOverflow and NeverOverflow are forbidden inside a group — setting one of those on a grouped item emits a one-shot console.warn and the item's priority is treated as Default for the layout pass. Spacers (ui5-toolbar-spacer) do not participate in grouping; setting a non-empty overflowGroup on a spacer emits a one-shot console.warn and the spacer's existing overflow behavior is unchanged.
The visible bar always preserves slot order — ungrouped items between group members keep their slot positions and the toolbar never reorders DOM children. In the popover group members appear adjacent in slot order. |
| Type | string |
| Default | "" |
| Since | 2.27.0 |
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 | "AlwaysOverflow" | "Default" | "NeverOverflow" (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<IToolbarItemContent> |
| Since | 2.20.0 |
Events
No events available for this component.
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. |