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

Menu

The building block for dropdowns, application launchers, and context menus — a vertical list of actions with optional descriptions, dividers, and severity variants. Pair with Menu toggle to make it a real dropdown.

Examples

Basic menus

Plain action items plus a disabled item and a divider-separated danger item.

With icons

Items carry an __item-icon.

With actions

A plain action button per item in __item-action — the star uses PF’s favorite button styling.

With links

Anchor items with an __item-external-icon; one aria-disabled.

With descriptions

A second __item-description line per item.

Item checkbox

Label items wrapping a standalone check in __item-check.

Menu footer

A link button in pf-v6-c-menu__footer.

Separated items

A pf-v6-c-divider between item groups.

Titled groups of items

__group sections with __group-title headings.

Group 1

Group 2

With favorites

Starring an item moves it into the Favorites group — Alpine owns the item array.

Favorites

All items

Filtering with search input

A search text-input-group in __search; items filter as you type.

Option single select

One selected option gets pf-m-selected + a check in __item-select-icon.

Option multi select

Any number of options can be selected.

Scrollable menus

pf-m-scrollable caps the content height.

Scrollable menu with custom height

--pf-v6-c-menu__content--MaxHeight overrides the cap.

With view more

A pf-m-load item appends more items on click.

With drilldown

Two-level drilldown — pf-m-drilled-in slides between the root list and nested menus.

Danger menu item

A divider-separated pf-m-danger item with a screen-reader prefix.

With flyout

pf-m-flyout submenus fly out from a hovered or focused item.

Flyout menu positions

pf-m-top / pf-m-left on the nested menu re-anchor the flyout.

Scrollable drilldown

The drilldown list scrolls — pf-m-scrollable plus the content MaxHeight token.

Width modified drilldown

--pf-v6-c-menu--Width widens the drilldown.

Drilldown with breadcrumbs

The __breadcrumb region tracks the drill path live; breadcrumb links drill back up.

Initially drilled-in menu

Starts inside a submenu (PF React’s startDrilledIn); drilling up returns to the root.

Drilldown with inline filter

The drilled submenu’s __search input filters its items.

Scrollable menu with header and footer

A scrollable list framed by __header and __footer regions.

Scrollable menu with search and footer

A scrollable list with a live __search region and a footer.

Loading

A pf-m-loading item holds a large spinner while items load.

Plain

pf-m-plain drops the menu border and shadow.

Plain with search and footer

The plain variant with search and footer regions and a divider before the footer.

Plain scrollable with search and footer

Plain and scrollable combined with search and footer regions.

Documentation

Menu props

The menu is a template family: menu is the root (it owns roving-focus keyboard nav) and the structure composes from menu-content > menu-list / menu-group > menu-item includes. Interactive variants (checkbox, radio, item-action, drilldown) hand-write their <li> inside a menu-list.

* required
Name Type Description
id / attrs String Root id / raw passthrough.
plain / scrollable Boolean The matching pf-m-* modifier.
modifiers String Extra pf-m-* classes.
menu-content Include Wraps the list(s); attrs for a custom max-height var.
menu-list Include The role=menu ul; ariaLabel, noRole (omit role=menu when items are not menuitems), attrs.
menu-group Include Titled section: titleText, attrs.
menu-item Include Common item: text, href (renders <a>), external, icon, description, disabled, danger, itemId.

Usage

Dropdown pattern. Wrap a Menu toggle + Menu in a positioned container; toggle the menu's visibility with Alpine.


Edit menu.html on GitHub
Static snapshot of the quarkus-pha showcase — source & live version