Menu

A menu is a list of options or actions that users can choose from.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-menu--pf-v6-c-menu--RowGap
0.25rem
.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.25rem
.pf-v6-c-menu--pf-v6-c-menu--PaddingBlockEnd
0.25rem
.pf-v6-c-menu--pf-v6-c-menu--PaddingInlineStart
0.25rem
.pf-v6-c-menu--pf-v6-c-menu--PaddingInlineEnd
0.25rem
.pf-v6-c-menu--pf-v6-c-menu--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-menu--pf-v6-c-menu--BoxShadow
0px 4px 10px 0px rgb(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--BorderWidth
0px
.pf-v6-c-menu--pf-v6-c-menu--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-menu--pf-v6-c-menu--BorderRadius
calc(6px + 0.25rem)
.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
0s
.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.25rem
.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__footer--BorderColor
transparent
.pf-v6-c-menu--pf-v6-c-menu__footer--BorderWidth
0
.pf-v6-c-menu--pf-v6-c-menu--m-scrollable__footer--BoxShadow
0px -4px 6px -4px rgb(41, 41, 41, 0.2000)
.pf-v6-c-menu--pf-v6-c-menu--m-scrollable__footer--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-menu--pf-v6-c-menu--m-scrollable__footer--BorderWidth
0px
.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) rgb(255, 255, 255, 0.0000)
.pf-v6-c-menu--pf-v6-c-menu__list-item--BorderWidth
0px
.pf-v6-c-menu--pf-v6-c-menu__list-item--hover--BorderWidth
0px
.pf-v6-c-menu--pf-v6-c-menu__list-item--BorderColor
(In light theme) rgb(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) rgb(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.25rem
.pf-v6-c-menu--pf-v6-c-menu__list--divider--MarginBlockEnd
0.25rem
.pf-v6-c-menu--pf-v6-c-menu__item--BorderRadius
6px
.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
1rem
.pf-v6-c-menu--pf-v6-c-menu__item--PaddingInlineEnd
1rem
.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) rgb(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
1rem
.pf-v6-c-menu--pf-v6-c-menu__header--PaddingInlineEnd
1rem
.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
1rem
.pf-v6-c-menu--pf-v6-c-menu__group-title--PaddingInlineEnd
1rem
.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
1rem
.pf-v6-c-menu--pf-v6-c-menu__breadcrumb--PaddingInlineEnd
1rem
.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
1rem
.pf-v6-c-menu--pf-v6-c-menu__footer--PaddingInlineEnd
1rem
.pf-v6-c-menu--pf-v6-c-menu__item-main--ColumnGap
0.5rem
.pf-v6-c-menu--pf-v6-c-menu__group-title--FontWeight
600
.pf-v6-c-menu--pf-v6-c-menu__group-title--Color
(In light theme) #151515
.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--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
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
0s
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown--c-menu--Transition
transform 0s
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform
0s
.pf-v6-c-menu--pf-v6-c-menu--m-drilldown__list--Transition
transform 0s
.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--Color
transparent
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])--pf-v6-c-menu__item-select-icon--Color
transparent
.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__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])--pf-v6-c-menu__list-item--hover--BackgroundColor
transparent
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])--pf-v6-c-menu__list-item--hover--BorderColor
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 -4px 6px -4px rgb(41, 41, 41, 0.2000)
.pf-v6-c-menu.pf-m-scrollable--pf-v6-c-menu__footer--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-menu.pf-m-scrollable--pf-v6-c-menu__footer--BorderWidth
0px
.pf-v6-c-menu.pf-m-scrollable--pf-v6-c-menu__footer--PaddingBlockStart
calc(0.5rem + 0.25rem)
.pf-v6-c-menu.pf-m-scrollable--pf-v6-c-menu__footer--PaddingBlockEnd
calc(0.5rem + 0.25rem)
.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) rgb(199, 199, 199, 0.2500)
.pf-v6-c-menu__list-item.pf-m-focus--pf-v6-c-menu__list-item--BorderWidth
0px
.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--m-plain__icon--Color
(In light theme) #dca614
.pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus)--pf-v6-c-button--hover__icon--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