Live demo — this example is server-driven; run the showcase locally for the interactive version.

Overflow menu

A row of action buttons that collapses some into a kebab menu when space runs out. Use in toolbars where the actions count may exceed available width.

Examples

Simple

Visible button group plus the kebab control.

Vertical

pf-m-vertical stacks the actions.

Group types

A button group and an icon-button group side by side.

Multiple groups

Several groups share the content area.

Persistent

The kebab is always visible and opens a working menu of the overflowed actions.

Breakpoint on container width

Drag the resize handle — below 440px the buttons collapse into the kebab (Alpine + ResizeObserver).

Breakpoint on container height

Vertical variant collapsing below 220px of height.

Documentation

Parameters accepted by {#include components/navigation/overflow-menu ... /}. Model mode: pass overflowMenu=<OverflowMenu> built in Java instead — the Java tab on each example shows the builder. Inner content (action group + control) goes in the slot.

* required
Name	Type	Description
* `id`	String	DOM id.
slot `content`	Qute block	__content (action group) + __control (kebab toggle).

Usage

Pair with a real menu. The kebab toggle here is a placeholder. In production wire it to a Menu with the overflowed actions.

Edit overflow-menu.html on GitHub