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

Dropdown

Composition pattern — Menu toggle + Menu. PF v6 doesn't ship a single Dropdown component; you compose one with Alpine for show/hide. No dedicated runtime template needed.

Examples

Basic dropdowns

Menu toggle + menu with a danger action.

With kebab toggle

Plain icon toggle.

With groups of items

Titled menu groups.


Group 1

With item descriptions

A second description line per item.

Split toggle with checkbox

The checkbox selects; the caret opens select-all/none actions.

Documentation

Dropdown pattern

Dropdown is a composition, not a runtime template. The structure is:

  • Outer wrapper with x-data="{ open: false }" and position: relative
  • Menu toggle button — sets open = !open
  • Menu shown via x-show="open" + @click.outside="open = false"

Usage

Vs. Select. Use dropdown for actions, select for picking a value.