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

Menu toggle

The button that opens a Menu — a labelled control with a caret, or a plain icon button (kebab) for compact toolbars.

Examples

Collapsed toggle

The default collapsed menu toggle.

Expanded toggle

pf-m-expanded + aria-expanded="true".

Small toggle

pf-m-small.

Disabled toggle

Native disabled attribute.

With a badge

A __count badge after the toggle text; also a plain-text toggle with only a badge.

Settings toggle

pf-m-settings with a gear icon — plain variant included.

Custom icons

Any icon in __icon before the text.

With avatar and text

An avatar in the icon slot — default, expanded, and disabled.

Variant styles

Default, primary, secondary, and danger toggles.

Plain toggle

pf-m-plain icon-only toggle.

Primary toggle

pf-m-primary.

Plain circle toggle

pf-m-plain pf-m-circle kebab — default, expanded, disabled.

Plain toggle with text label

pf-m-plain pf-m-text.

Split toggle

A plain pf-m-split-button — an action button plus a caret-only toggle button; default/primary/secondary.

Split toggle with checkbox

pf-m-split-button — a standalone check plus a caret-only toggle button; default/primary/secondary/disabled.

Split toggle with labeled checkbox

The check carries its own label text.

Split toggle with checkbox and toggle text

Toggle text sits between the check and the caret button.

Split toggle with checkbox, icon, and toggle text

The toggle button is pf-m-text and carries an icon, label text, and the caret, so clicking any of them triggers the toggle.

Split toggle with action

An action button plus the caret toggle button.

Full height toggle

pf-m-full-height — stretches to its container, e.g. a masthead.

Full width toggle

pf-m-full-width.

Toggle in a form

A full-width toggle inside a form group.

Typeahead toggle

pf-m-typeahead wrapping a plain text-input-group plus the caret button.

Status toggle

pf-m-success/warning/danger with a __status-icon.

Placeholder text in toggle

pf-m-placeholder styles the text as placeholder.

Documentation

Parameters accepted by {#include components/navigation/menu-toggle ... /}. Model mode: pass toggle=<MenuToggle> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	DOM id on the button.
(content slot)	Slot	Visible label, passed as the include body. Empty body is fine for plain icon-only toggles.
`plain` / `primary` / `expanded` / `disabled`	boolean	Modifier flags — plain drops the caret, primary applies the primary button style, expanded toggles the open visual + aria, disabled mutes.
`ariaLabel`	String	Accessible name — required when the body slot is empty (plain icon-only variant).

Usage

Pair with Menu. Toggle the menu's visibility via Alpine and pass the trigger button's expanded state to aria-expanded.

Edit menu-toggle.html on GitHub