Skip to content

Menu

Examples

Basic

Danger menu item

With icons

With checkbox

Scrollable

Scrollable with custom menu height

With flyout

With flyout menu top

With flyout menu left

With flyout menu left top

Drilldown

Drilldown level two

Drilldown level three

Drilldown level four

Scrollable drilldown

Width modified drilldown

Drilldown with breadcrumbs - level 1

Drilldown with breadcrumbs - level 2

Drilldown with breadcrumbs - level 3

Drilldown with breadcrumbs - level 4

Scrollable menu with header and footer

Scrollable menu with search and footer

With filtering

With links

With separator(s)

With titled groups

With description

With actions

Actions

With favorites

Option single select

Option multi-select

View more

Loading

Footer

Plain

Plain with search and footer

Plain scrollable with search and footer

Documentation

Accessibility

Attribute
Applied
Outcome
role="menu"
.pf-v6-c-menu__list
Declares .pf-v6-c-menu__list as a menu.
disabled
button.pf-v6-c-menu__item
When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.
role="menuitem"
.pf-v6-c-menu__item, .pf-v6-c-menu__list-item (checkbox)
Assigns .pf-v6-c-menu__item as an option in a set of choices contained by a menu.
role="none"
.pf-v6-c-menu__list-item
Removes semantic meaning from .pf-v6-c-menu__list-item.
aria-disabled="true"
.pf-v6-c-menu__item
Indicates to assistive technologies that the menu item is disabled, but still allows it to be focusable via keyboard. Additional click prevention may be required.
tabindex="-1"
a.pf-v6-c-menu__item
When the menu item uses a link element and has aria-disabled="true" passed in, removes it from keyboard focus. This is similar to passing disabled to a menu item that uses a button element.
aria-hidden="true"
.pf-v6-c-menu__item-icon, .pf-v6-c-menu__item-action-icon, .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__item-toggle-icon, .pf-v6-c-menu__item-select-icon
Hides the icon from assistive technologies.
aria-label="Descriptive text"
.pf-v6-c-menu__item-action-icon
There should always be descriptive text on an action icon because there is no visible descriptive text labelling the icon.
aria-label="Not starred"
.pf-v6-c-menu__item-action-icon.pf-m-favorite
Provides an accessible label indicating that the favorite action is not selected.
aria-label="Starred"
.pf-v6-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited
Provides an accessible label indicating that the favorite action is selected.

Usage

Class
Applied to
Outcome
.pf-v6-c-menu
<div>
Initiates the menu. Required
.pf-v6-c-menu__header
<div>
Initiates the menu header container.
.pf-v6-c-menu__search
<div>
Initiates the menu search container. Use for filtering.
.pf-v6-c-menu__search-input
<div>
Initiates the menu search input container.
.pf-v6-c-menu__content
<div>
Initiates the menu content. Use for lists. Required
.pf-v6-c-menu__list
<ul>
Initiates the menu list. Required
.pf-v6-c-menu__list-item
<li>
Initiates the menu list item. Required
.pf-v6-c-menu__item
<button>, <a>, <div>, <label>
Initiates the menu item. Required
.pf-v6-c-menu__item-main
<span>
Initiates the menu item main container. Required
.pf-v6-c-menu__item-text
<span>
Initiates the menu item text. Required
.pf-v6-c-menu__item-check
<span>
Initiates a menu label.
.pf-v6-c-menu__item-description
<span>
Initiates the menu item description.
.pf-v6-c-menu__item-group
<section>
Initiates the menu item group.
.pf-v6-c-menu__item-group-title
<h1>
Initiates the menu item group title.
.pf-v6-c-menu__item-icon
<span>
Initiates the menu item icon.
.pf-v6-c-menu__item-toggle-icon
<span>
Initiates the menu item toggle icon.
.pf-v6-c-menu__item-select-icon
<span>
Initiates the menu item select icon.
.pf-v6-c-menu__item-action
<button>
Initiates the menu item action.
.pf-v6-c-menu__item-action-icon
<span>
Initiates the menu item action icon.
.pf-v6-c-menu__item-external-icon
<span>
Initiates the menu item external icon.
.pf-v6-c-menu__footer
<div>
Initiates the menu footer.
.pf-m-hidden{-on-[breakpoint]}
.pf-v6-c-menu__list, .pf-v6-c-menu__list-item, .pf-v6-c-menu__group
Modifies a menu element to be hidden, at optional breakpoint.
.pf-m-visible{-on-[breakpoint]}
.pf-v6-c-menu__list, .pf-v6-c-menu__list-item, .pf-v6-c-menu__group
Modifies a menu element to be shown, at optional breakpoint.
.pf-m-favorite
.pf-v6-c-menu__item-action
Modifies the menu item action to handle the favorite icon.
.pf-m-favorited
.pf-v6-c-menu__item-action.pf-m-favorite
Modifies the menu item action icon to be favorited.
.pf-m-selected
.pf-v6-c-menu__item
Modifies the menu item to be selected.
.pf-m-drill-up
.pf-v6-c-menu__list-item
Flags the menu item as a drill up button.
.pf-m-flyout
.pf-v6-c-menu
Modifies the menu so that all nested .pf-v6-c-menu elements "flyout".
.pf-m-nav
.pf-v6-c-menu
Modifies the menu for nav variant.
.pf-m-top
.pf-v6-c-menu
Modifies a flyout menu to expand to the top.
.pf-m-left
.pf-v6-c-menu
Modifies a flyout menu to expand to the left.
.pf-m-plain
.pf-v6-c-menu
Modifies the menu component for use in the page instead of as a dropdown.
.pf-m-scrollable
.pf-v6-c-menu
Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting --pf-v6-c-menu__content--MaxHeight.
.pf-m-current
.pf-v6-c-menu__list-item
Modifies a list item for current styles.
.pf-m-load
.pf-v6-c-menu__list-item
Modifies a list item for "load more" styles.
.pf-m-loading
.pf-v6-c-menu__list-item
Modifies a list item for loading styles.
.pf-m-disabled
.pf-v6-c-menu__item
Modifies a list item for disabled styling.
.pf-m-aria-disabled
.pf-v6-c-menu__item
Modifies a list item for aria-disabled styling.
.pf-m-drilldown
.pf-v6-c-menu
Modifies the menu so that all nested .pf-v6-c-menu elements "drill down".
.pf-m-current-path
.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item
Modifies the menu list item for current path state.
.pf-m-drilled-in
.pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu
Modifies the menu list for drilled in state.
.pf-m-static
.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu
Modifies the menu list for drilled static state.
.pf-m-danger
.pf-v6-c-menu__item-text
Modifies a list item for danger styles.
--pf-v6-c-menu--Width: {width}
.pf-v6-c-menu
Modifies the width of the menu. The default value is auto.
--pf-v6-c-menu__content--MaxHeight: {height}
.pf-v6-c-menu__content
Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed.
--pf-v6-c-menu__content--Height: {height}
.pf-v6-c-menu
Modifies the height of the drilldown menu content. The default value is auto.
--pf-v6-c-menu--m-flyout__menu--top-offset
.pf-v6-c-menu
Modifies the menu to allow for an offset to the top positioning.
--pf-v6-c-menu--m-flyout__menu--left-offset
.pf-v6-c-menu
Modifies the menu to allow for an offset to the left positioning.
--pf-v6-c-menu--m-flyout__menu--m-left--right-offset
.pf-v6-c-menu.pf-m-flyout > .pf-v6-c-menu
Modifies the menu to allow for an offset to the right positioning.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-menu--pf-v6-c-menu--RowGap
0.5rem
.pf-v6-c-menu--pf-v6-c-menu--Width
auto
.pf-v6-c-menu--pf-v6-c-menu--MinWidth
auto
.pf-v6-c-menu--pf-v6-c-menu--PaddingBlockStart
0.5rem
.pf-v6-c-menu--pf-v6-c-menu--PaddingBlockEnd
0.5rem
.pf-v6-c-menu--pf-v6-c-menu--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-menu--pf-v6-c-menu--BoxShadow
0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
.pf-v6-c-menu--pf-v6-c-menu--Color
(In light theme) #151515
.pf-v6-c-menu--pf-v6-c-menu--BorderRadius
6px
.pf-v6-c-menu--pf-v6-c-menu--OutlineOffset
calc(1px * -3)
.pf-v6-c-menu--pf-v6-c-menu--ZIndex
200
.pf-v6-c-menu--pf-v6-c-menu--button--disabled--Color
(In light theme) #a3a3a3
.pf-v6-c-menu--pf-v6-c-menu--icon--disabled--Color
(In light theme) #a3a3a3
.pf-v6-c-menu--pf-v6-c-menu--TransitionDuration
200ms
.pf-v6-c-menu--pf-v6-c-menu--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-menu--pf-v6-c-menu--m-plain--BoxShadow
none
.pf-v6-c-menu--pf-v6-c-menu__content--RowGap
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__content--Height
auto
.pf-v6-c-menu--pf-v6-c-menu__content--MaxHeight
none
.pf-v6-c-menu--pf-v6-c-menu--m-scrollable__content--MaxHeight
18.75rem
.pf-v6-c-menu--pf-v6-c-menu__search--PaddingBlockStart
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__search--PaddingBlockEnd
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__search--PaddingInlineStart
1rem
.pf-v6-c-menu--pf-v6-c-menu__search--PaddingInlineEnd
1rem
.pf-v6-c-menu--pf-v6-c-menu__footer--BoxShadow
none
.pf-v6-c-menu--pf-v6-c-menu--m-scrollable__footer--BoxShadow
0px -10px 9px -8px rgba(41, 41, 41, 0.1500)
.pf-v6-c-menu--pf-v6-c-menu__list-item--Color
(In light theme) #151515
.pf-v6-c-menu--pf-v6-c-menu__list-item--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-menu--pf-v6-c-menu__list-item--TransitionDuration
100ms
.pf-v6-c-menu--pf-v6-c-menu__list-item--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-menu--pf-v6-c-menu__list-item--TransitionProperty
background-color
.pf-v6-c-menu--pf-v6-c-menu__list-item--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-menu--pf-v6-c-menu__list-item--m-danger--Color
(In light theme) #b1380b
.pf-v6-c-menu--pf-v6-c-menu__list-item--m-load__item--Color
(In light theme) #0066cc
.pf-v6-c-menu--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__list--divider--MarginBlockStart
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__list--divider--MarginBlockEnd
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__item--PaddingBlockStart
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__item--PaddingBlockEnd
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__item--PaddingInlineStart
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__item--PaddingInlineEnd
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__item--FontSize
0.875rem
.pf-v6-c-menu--pf-v6-c-menu__item--LineHeight
1.5
.pf-v6-c-menu--pf-v6-c-menu__item--FontWeight
400
.pf-v6-c-menu--pf-v6-c-menu__item--Color
(In light theme) #151515
.pf-v6-c-menu--pf-v6-c-menu__item--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-menu--pf-v6-c-menu__item--m-disabled--Color
(In light theme) #a3a3a3
.pf-v6-c-menu--pf-v6-c-menu__header--PaddingBlockStart
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__header--PaddingBlockEnd
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__header--PaddingInlineStart
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__header--PaddingInlineEnd
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__group-title--PaddingBlockStart
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__group-title--PaddingBlockEnd
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__group-title--PaddingInlineStart
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__group-title--PaddingInlineEnd
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__breadcrumb--PaddingBlockStart
0
.pf-v6-c-menu--pf-v6-c-menu__breadcrumb--PaddingBlockEnd
0
.pf-v6-c-menu--pf-v6-c-menu__breadcrumb--PaddingInlineStart
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__breadcrumb--PaddingInlineEnd
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__footer--PaddingBlockStart
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__footer--PaddingBlockEnd
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__footer--PaddingInlineStart
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__footer--PaddingInlineEnd
1.5rem
.pf-v6-c-menu--pf-v6-c-menu__item-main--ColumnGap
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__group-title--Color
(In light theme) #4d4d4d
.pf-v6-c-menu--pf-v6-c-menu__item-description--FontSize
0.75rem
.pf-v6-c-menu--pf-v6-c-menu__item-description--Color
(In light theme) #4d4d4d
.pf-v6-c-menu--pf-v6-c-menu__item-action--FontSize
0.875rem
.pf-v6-c-menu--pf-v6-c-menu__item-action--icon--size
0.875rem, 0.875rem
.pf-v6-c-menu--pf-v6-c-menu__item-action--Color
(In light theme) #707070
.pf-v6-c-menu--pf-v6-c-menu__item-action--m-favorited--Color
(In light theme) #dca614
.pf-v6-c-menu--pf-v6-c-menu__item-action--button--MinWidth
calc(0.875rem, 0.875rem) + 0.5rem * 2
.pf-v6-c-menu--pf-v6-c-menu__item-select-icon--Color
(In light theme) #707070
.pf-v6-c-menu--pf-v6-c-menu__item--m-selected__item-select-icon--Color
(In light theme) #0066cc
.pf-v6-c-menu--pf-v6-c-menu__item-external--Color
(In light theme) #0066cc
.pf-v6-c-menu--pf-v6-c-menu--m-flyout__menu--top-offset
0px
.pf-v6-c-menu--pf-v6-c-menu--m-flyout__menu--left-offset
0px
.pf-v6-c-menu--pf-v6-c-menu--m-flyout__menu--m-left--right-offset
0px
.pf-v6-c-menu--pf-v6-c-menu--m-flyout__Zindex
200
.pf-v6-c-menu--pf-v6-c-menu--m-flyout__menu--InsetBlockStart
calc(0 * -1 + 0px)
.pf-v6-c-menu--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd
auto
.pf-v6-c-menu--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd
auto
.pf-v6-c-menu--pf-v6-c-menu--m-flyout__menu--InsetInlineStart
calc(100% + 0px)
.pf-v6-c-menu--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd
calc(0 * -1)
.pf-v6-c-menu--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd
calc(100% + 0px)
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height
400ms
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform
400ms
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown__content--Transition
transform 400ms, height 400ms
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart
0
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform
400ms
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown--c-menu--Transition
transform 400ms
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform
400ms
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown__list--Transition
transform 400ms
.pf-v6-c-menu--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex
100
.pf-v6-c-menu__list--pf-v6-hidden-visible--visible--Display
grid
.pf-v6-c-menu__list--pf-v6-hidden-visible--hidden--Display
none
.pf-v6-c-menu__list--pf-v6-hidden-visible--Display
flex
.pf-v6-c-menu__list.pf-m-hidden--pf-v6-hidden-visible--Display
none
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])--pf-v6-c-menu__item--Color
(In light theme) #a3a3a3
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])--pf-v6-c-menu__item-toggle-icon--Color
(In light theme) #a3a3a3
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])--pf-v6-c-menu__item-external-icon--Color
(In light theme) #a3a3a3
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])--pf-v6-c-menu__item-description--Color
(In light theme) #a3a3a3
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])--pf-v6-c-menu__list-item--BackgroundColor
transparent
.pf-v6-c-menu.pf-m-top--pf-v6-c-menu--m-flyout__menu--InsetBlockStart
auto
.pf-v6-c-menu.pf-m-top--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd
calc(0 * -1)
.pf-v6-c-menu.pf-m-left--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd
calc(100% + 0px)
.pf-v6-c-menu.pf-m-left--pf-v6-c-menu--m-flyout__menu--InsetInlineStart
auto
.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list--pf-v6-c-menu__list--PaddingBlockStart
0
.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list--pf-v6-c-menu__list--PaddingBlockEnd
0
.pf-v6-c-menu.pf-m-plain--pf-v6-c-menu--BoxShadow
none
.pf-v6-c-menu.pf-m-scrollable--pf-v6-c-menu__content--MaxHeight
18.75rem
.pf-v6-c-menu.pf-m-scrollable--pf-v6-c-menu__footer--BoxShadow
0px -10px 9px -8px rgba(41, 41, 41, 0.1500)
.pf-v6-c-menu.pf-m-scrollable--pf-v6-c-menu__footer--PaddingBlockStart
calc(0.5rem + 0.5rem)
.pf-v6-c-menu.pf-m-scrollable--pf-v6-c-menu__footer--PaddingBlockEnd
calc(0.5rem + 0.5rem)
.pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer)--pf-v6-c-menu--PaddingBlockEnd
0
.pf-v6-c-menu__content .pf-v6-c-menu__content--pf-v6-c-menu__content--Height
auto
.pf-v6-c-menu__list-item.pf-m-load--pf-v6-c-menu__item--Color
(In light theme) #0066cc
.pf-v6-c-menu__list-item.pf-m-danger--pf-v6-c-menu__item--Color
(In light theme) #b1380b
.pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus)--pf-v6-c-menu__item--Color
undefined, #b1380b
.pf-v6-c-menu__list-item.pf-m-focus--pf-v6-c-menu__list-item--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-menu__item--pf-v6-hidden-visible--visible--Display
flex
.pf-v6-c-menu__item--pf-v6-hidden-visible--hidden--Display
none
.pf-v6-c-menu__item--pf-v6-hidden-visible--Display
flex
.pf-v6-c-menu__item.pf-m-hidden--pf-v6-hidden-visible--Display
none
.pf-v6-c-menu__item.pf-m-selected--pf-v6-c-menu__item-select-icon--Color
(In light theme) #0066cc
.pf-v6-c-menu__item-check .pf-v6-c-check--pf-v6-c-check__input--TranslateY
none
.pf-v6-c-menu__item-toggle-icon.pf-m-favorited--pf-v6-c-button--Color
(In light theme) #dca614
.pf-v6-c-menu__item-toggle-icon.pf-m-favorited--pf-v6-c-menu__item-action--Color
(In light theme) #dca614
.pf-v6-c-menu__breadcrumb--pf-v6-c-breadcrumb__item--FontSize
undefined
.pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--BorderWidth
0
.pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--BorderColor
transparent

View source on GitHub