Examples
With actions
A multi-select menu whose items carry icon actions (pf-v6-c-menu__item-action); selecting
checks the item and keeps the menu open.
With favorites
Star an item to pin a clone of it into a Favorites group at the top of the menu; unstar to remove it again.
With drilldown
A toggle-attached drilldown menu, three levels deep — drill into a submenu, and the breadcrumb item at its top drills back out.
With inline search filter
A pf-v6-c-menu__search input filters the scrollable list live; when nothing matches, a
disabled "No results found" item appears.
Tree view menu
The toggle opens a raised pf-v6-c-panel hosting a checkbox tree view (a Status filter) —
expand parents, checkboxes cascade, counts in badges. The toggle label mirrors the open state.
Status
-
Ready 2
-
Server 1
-
Worker 1
-
-
Not ready 1
-
Updating 1
-
Flyout menu
A pf-m-flyout item whose nested menu flies out to the side on hover/click (nested Alpine
scope).
Date select menu
The toggle opens a raised panel hosting the calendar-month component; picking a day moves the selection, updates the toggle's timestamp, and closes the panel.
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Documentation
Custom menus pattern
Composition — attach a pf-v6-c-menu to a menu-toggle and combine the menu's own slots:
.pf-v6-c-menu__search for filters,
.pf-v6-c-menu__item-action for per-item icon actions and favorites stars,
pf-m-drilldown for nested levels, and
.pf-v6-c-menu__footer for trailing actions.
Usage
Keep the menu list a list. Even with header/footer, the inner items should still be <li> with
role="menuitem" for proper keyboard navigation.