OverflowMenuComponent
A responsive toolbar component that automatically moves items that no longer fit into the available horizontal (or vertical) space into an overflow menu.
Items are rendered as icon buttons with a tooltip. When items overflow, they collapse into a MatMenu triggered by the overflow icon button. Items that share the same group value on OverflowMenuItem are rendered in labeled sections both in the toolbar and in the overflow menu.
Example :
<yuv-overflow-menu
[menuItems]="actions"
[groupLabels]="{ edit: 'Edit', view: 'View' }"
/>Component Metadata
Section titled “Component Metadata”Selector: yuv-overflow-menu
Standalone: No
Implements: AfterViewInit, OnDestroy
Inputs
Section titled “Inputs”groupLabels
Section titled “groupLabels”Type: Record<string, string>
Optional display labels for item groups shown in the overflow menu. The key must match the group property of the corresponding OverflowMenuItem entries.Example :
{ edit: 'Edit actions', view: 'View options' }menuItems
Section titled “menuItems”Type: OverflowMenuItem[]
Default Value: []
The list of items to render in the toolbar. Items are displayed as icon buttons and overflow into a MatMenu when they no longer fit the available space.
overflowIcon
Section titled “overflowIcon”Type: string
Default Value: 'more_horiz'
Material icon ligature used for the overflow trigger button. Defaults to 'more_horiz' (three horizontal dots).
vertical
Section titled “vertical”Type: boolean
Default Value: false
When true the toolbar is laid out vertically and tooltips appear to the right of each button instead of below. The host element receives the CSS class vertical to allow style overrides. Defaults to false.
Properties
Section titled “Properties”__menuGroups
Section titled “__menuGroups”Type: unknown
Default Value: computed<MenuGroup[]>(() => this.#groupItems(this.__menuItems()))
activeStyles
Section titled “activeStyles”Type: object
Default Value: {}
overflowGroups
Section titled “overflowGroups”Type: unknown
Default Value: signal<MenuGroup[]>([])