Skip to content
PatternFly logo

Menu

A menu is a list of options or actions that users can choose from. It can be used in a variety of contexts whenever the user needs to choose between multiple values, options, or actions. A menu is most often paired with a menu toggle as its trigger, but can also be used inline or can be attached to other interactable elements to toggle it open and close.

Examples

Basic

Danger menu item

With icons

With checkbox

Scrollable

Scrollable with custom menu height

With flyout Beta

With flyout menu top Beta

With flyout menu left Beta

With flyout menu left top Beta

Standard menu, flyout child

Drilldown Beta

Drilldown level two Beta

Drilldown level three Beta

Drilldown level four Beta

Scrollable drilldown Beta

Width modified drilldown Beta

Drilldown with breadcrumbs - level 1 Beta

Drilldown with breadcrumbs - level 2 Beta

Drilldown with breadcrumbs - level 3 Beta

Drilldown with breadcrumbs - level 4 Beta

With filtering

With separator(s)

With titled groups

With description

With actions

Actions

With favorites

Option single select

Option multi-select

View more

Loading

Plain

Documentation

Accessibility

Attribute
Applied
Outcome
role="menu"
.pf-c-menu__list
Declares .pf-c-menu__list as a menu.
disabled
button.pf-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-c-menu__item, .pf-c-menu__list-item (checkbox)
Assigns .pf-c-menu__item as an option in a set of choices contained by a menu.
role="none"
.pf-c-menu__list-item
Removes semantic meaning from .pf-c-menu__list-item.
aria-disabled="true"
a.pf-c-menu__item
When the menu item uses a link element, removes it from keyboard focus.
tabindex="-1"
a.pf-c-menu__item
When the menu item uses a link element, removes it from keyboard focus.
aria-hidden="true"
.pf-c-menu__item-icon, .pf-c-menu__item-action-icon, .pf-c-menu__item-external-icon, .pf-c-menu__item-toggle-icon, .pf-c-menu__item-select-icon
Hides the icon from assistive technologies.
aria-label="Not starred"
.pf-c-menu__item-action-icon.pf-m-favorite
Provides an accessible label indicating that the favorite action is not selected.
aria-label="Starred"
.pf-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-c-menu
<div>
Initiates the menu. Required
.pf-c-menu__header
<div>
Initiates the menu header container.
.pf-c-menu__search
<div>
Initiates the menu search container. Use for filtering.
.pf-c-menu__search-input
<div>
Initiates the menu search input container.
.pf-c-menu__content
<div>
Initiates the menu content. Use for lists. Required
.pf-c-menu__list
<ul>
Initiates the menu list. Required
.pf-c-menu__list-item
<li>
Initiates the menu list item. Required
.pf-c-menu__item
<button>, <a>, <div>, <label>
Initiates the menu item. Required
.pf-c-menu__item-main
<span>
Initiates the menu item main container. Required
.pf-c-menu__item-text
<span>
Initiates the menu item text. Required
.pf-c-menu__item-check
<span>
Initiates a menu label.
.pf-c-menu__item-description
<span>
Initiates the menu item description.
.pf-c-menu__item-group
<section>
Initiates the menu item group.
.pf-c-menu__item-group-title
<h1>
Initiates the menu item group title.
.pf-c-menu__item-icon
<span>
Initiates the menu item icon.
.pf-c-menu__item-toggle-icon
<span>
Initiates the menu item toggle icon.
.pf-c-menu__item-select-icon
<span>
Initiates the menu item select icon.
.pf-c-menu__item-action
<button>
Initiates the menu item action.
.pf-c-menu__item-action-icon
<span>
Initiates the menu item action icon.
.pf-c-menu__item-external-icon
<span>
Initiates the menu item external icon.
.pf-c-menu__footer
<div>
Initiates the menu footer.
.pf-m-hidden{-on-[breakpoint]}
.pf-c-menu__list, .pf-c-menu__list-item, .pf-c-menu__group
Modifies a menu element to be hidden, at optional breakpoint.
.pf-m-visible{-on-[breakpoint]}
.pf-c-menu__list, .pf-c-menu__list-item, .pf-c-menu__group
Modifies a menu element to be shown, at optional breakpoint.
.pf-m-favorite
.pf-c-menu__item-action
Modifies the menu item action to handle the favorite icon.
.pf-m-favorited
.pf-c-menu__item-action.pf-m-favorite
Modifies the menu item action icon to be favorited.
.pf-m-selected
.pf-c-menu__item
Modifies the menu item to be selected.
.pf-m-drill-up
.pf-c-menu__list-item
Flags the menu item as a drill up button.
.pf-m-flyout
.pf-c-menu
Modifies the menu so that all nested .pf-c-menu elements "flyout".
.pf-m-nav
.pf-c-menu
Modifies the menu for nav variant.
.pf-m-top
.pf-c-menu
Modifies a flyout menu to expand to the top.
.pf-m-left
.pf-c-menu
Modifies a flyout menu to expand to the left.
.pf-m-plain
.pf-c-menu
Modifies the menu component for use in the page instead of as a dropdown.
.pf-m-scrollable
.pf-c-menu
Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting --pf-c-menu__content--MaxHeight.
.pf-m-current
.pf-c-menu__list-item
Modifies a list item for current styles.
.pf-m-load
.pf-c-menu__list-item
Modifies a list item for "load more" styles.
.pf-m-loading
.pf-c-menu__list-item
Modifies a list item for loading styles.
.pf-m-drilldown
.pf-c-menu
Modifies the menu so that all nested .pf-c-menu elements "drill down".
.pf-m-current-path
.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item
Modifies the menu list item for current path state.
.pf-m-drilled-in
.pf-c-menu.pf-m-drilldown, .pf-c-menu.pf-m-drilldown .pf-c-menu
Modifies the menu list for drilled in state.
.pf-m-static
.pf-c-menu.pf-m-drilldown .pf-c-menu
Modifies the menu list for drilled static state.
.pf-m-danger
pf-c-menu__item-text
Modifies a list item for danger styles.
--pf-c-menu--Width: {width}
.pf-c-menu
Modifies the width of the menu. The default value is auto.
--pf-c-menu__content--MaxHeight: {height}
.pf-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-c-menu__content--Height: {height}
.pf-c-menu
Modifies the height of the drilldown menu content. The default value is auto.
--pf-c-menu--m-flyout__menu--top-offset
.pf-c-menu
Modifies the menu to allow for an offset to the top positioning.
--pf-c-menu--m-flyout__menu--left-offset
.pf-c-menu
Modifies the menu to allow for an offset to the left positioning.
--pf-c-menu--m-flyout__menu--m-left--right-offset
.pf-c-menu.pf-m-flyout > .pf-c-menu
Modifies the menu to allow for an offset to the right positioning.

CSS variables

.pf-c-menu--pf-global--Color--100
#151515
.pf-c-menu--pf-global--Color--200
#6a6e73
.pf-c-menu--pf-global--BorderColor--100
#d2d2d2
.pf-c-menu--pf-global--primary-color--100
#06c
.pf-c-menu--pf-global--link--Color
#06c
.pf-c-menu--pf-global--link--Color--hover
#004080
.pf-c-menu--pf-global--BackgroundColor--100
#fff
.pf-c-menu--pf-c-menu--BackgroundColor
#fff
.pf-c-menu--pf-c-menu--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-menu--pf-c-menu--MinWidth
auto
.pf-c-menu--pf-c-menu--Width
auto
.pf-c-menu--pf-c-menu--ZIndex
200
.pf-c-menu--pf-c-menu--Top
auto
.pf-c-menu--pf-c-menu--m-flyout__menu--Top
calc(0.5rem * -1 + 0px)
.pf-c-menu--pf-c-menu--m-flyout__menu--Right
auto
.pf-c-menu--pf-c-menu--m-flyout__menu--Bottom
auto
.pf-c-menu--pf-c-menu--m-flyout__menu--Left
calc(100% + 0px)
.pf-c-menu--pf-c-menu--m-flyout__menu--m-top--Bottom
calc(0.5rem * -1)
.pf-c-menu--pf-c-menu--m-flyout__menu--m-left--Right
calc(100% + 0px)
.pf-c-menu--pf-c-menu--m-plain--BoxShadow
none
.pf-c-menu--pf-c-menu--m-flyout__menu--top-offset
0px
.pf-c-menu--pf-c-menu--m-flyout__menu--left-offset
0px
.pf-c-menu--pf-c-menu--m-flyout__menu--m-left--right-offset
0px
.pf-c-menu--pf-c-menu__content--Height
auto
.pf-c-menu--pf-c-menu__content--MaxHeight
none
.pf-c-menu--pf-c-menu--m-scrollable__content--MaxHeight
18.75rem
.pf-c-menu--pf-c-menu--c-divider--MarginTop
0
.pf-c-menu--pf-c-menu--c-divider--MarginBottom
0
.pf-c-menu--pf-c-menu__list--c-divider--MarginTop
0.5rem
.pf-c-menu--pf-c-menu__list--c-divider--MarginBottom
0.5rem
.pf-c-menu--pf-c-menu__header--PaddingTop
1rem
.pf-c-menu--pf-c-menu__header--PaddingRight
1rem
.pf-c-menu--pf-c-menu__header--PaddingBottom
1rem
.pf-c-menu--pf-c-menu__header--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__header--c-menu__item--MarginTop
calc(1rem * -1 / 2)
.pf-c-menu--pf-c-menu__header--c-menu__item--MarginRight
calc(1rem * -1 / 2)
.pf-c-menu--pf-c-menu__header--c-menu__item--MarginBottom
calc(1rem * -1 / 2)
.pf-c-menu--pf-c-menu__header--c-menu__item--MarginLeft
calc(1rem * -1 / 2)
.pf-c-menu--pf-c-menu__header--c-menu__item--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__header--c-menu__item--PaddingRight
1rem
.pf-c-menu--pf-c-menu__header--c-menu__item--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu__header--c-menu__item--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__header--c-menu__item--BackgroundColor
transparent
.pf-c-menu--pf-c-menu__header--c-menu__item--hover--BackgroundColor
#f0f0f0
.pf-c-menu--pf-c-menu__header--c-menu__item--focus--BackgroundColor
#f0f0f0
.pf-c-menu--pf-c-menu__search--PaddingTop
1rem
.pf-c-menu--pf-c-menu__search--PaddingRight
1rem
.pf-c-menu--pf-c-menu__search--PaddingBottom
1rem
.pf-c-menu--pf-c-menu__search--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__header__search--PaddingTop
0
.pf-c-menu--pf-c-menu__list--Display
block
.pf-c-menu--pf-c-menu__list--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__list--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu__list-item--Display
flex
.pf-c-menu--pf-c-menu__list-item--Color
#151515
.pf-c-menu--pf-c-menu__list-item--BackgroundColor
transparent
.pf-c-menu--pf-c-menu__list-item--hover--BackgroundColor
#f0f0f0
.pf-c-menu--pf-c-menu__list-item--focus-within--BackgroundColor
#f0f0f0
.pf-c-menu--pf-c-menu__list-item--m-loading--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__item--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__item--PaddingRight
1rem
.pf-c-menu--pf-c-menu__item--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu__item--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__item--OutlineOffset
calc(0.125rem * -1)
.pf-c-menu--pf-c-menu__item--FontSize
1rem
.pf-c-menu--pf-c-menu__item--FontWeight
400
.pf-c-menu--pf-c-menu__item--LineHeight
1.5
.pf-c-menu--pf-c-menu__list-item--m-disabled__item--Color
#6a6e73
.pf-c-menu--pf-c-menu__list-item--m-danger__item--Color
#c9190b
.pf-c-menu--pf-c-menu__list-item--m-load__item--Color
#06c
.pf-c-menu--pf-c-menu__group--Display
block
.pf-c-menu--pf-c-menu__group-title--PaddingTop
1rem
.pf-c-menu--pf-c-menu__group-title--PaddingRight
1rem
.pf-c-menu--pf-c-menu__group-title--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__group-title--FontSize
0.75rem
.pf-c-menu--pf-c-menu__group-title--FontWeight
400
.pf-c-menu--pf-c-menu__group-title--Color
#6a6e73
.pf-c-menu--pf-c-menu__item-description--FontSize
0.75rem
.pf-c-menu--pf-c-menu__item-description--Color
#6a6e73
.pf-c-menu--pf-c-menu__item-icon--MarginRight
0.5rem
.pf-c-menu--pf-c-menu__item-check--MarginRight
0.5rem
.pf-c-menu--pf-c-menu__item-toggle-icon--PaddingRight
0.5rem
.pf-c-menu--pf-c-menu__item-toggle-icon--PaddingLeft
0.5rem
.pf-c-menu--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color
#d2d2d2
.pf-c-menu--pf-c-menu__item-text--item-toggle-icon--MarginLeft
0.5rem
.pf-c-menu--pf-c-menu__item-toggle-icon--item-text--MarginLeft
0.5rem
.pf-c-menu--pf-c-menu__item-select-icon--MarginLeft
0.5rem
.pf-c-menu--pf-c-menu__item-select-icon--Color
#06c
.pf-c-menu--pf-c-menu__item-select-icon--FontSize
0.625rem
.pf-c-menu--pf-c-menu__item-external-icon--MarginLeft
0.5rem
.pf-c-menu--pf-c-menu__item-external-icon--Color
#06c
.pf-c-menu--pf-c-menu__item-external-icon--FontSize
0.625rem
.pf-c-menu--pf-c-menu__item-external-icon--Opacity
0
.pf-c-menu--pf-c-menu__item-action--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__item-action--PaddingRight
1rem
.pf-c-menu--pf-c-menu__item-action--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu__item-action--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__item-action--Color
#6a6e73
.pf-c-menu--pf-c-menu__item-action--hover--Color
#151515
.pf-c-menu--pf-c-menu__item-action--disabled--Color
#d2d2d2
.pf-c-menu--pf-c-menu__item-action--m-favorited--Color
#f0ab00
.pf-c-menu--pf-c-menu__item-action--m-favorited--hover--Color
#c58c00
.pf-c-menu--pf-c-menu__item-action-icon--Height
calc(1rem * 1.5)
.pf-c-menu--pf-c-menu__item-action--m-favorite__icon--FontSize
0.625rem
.pf-c-menu--pf-c-menu__breadcrumb--PaddingTop
1rem
.pf-c-menu--pf-c-menu__breadcrumb--PaddingRight
1rem
.pf-c-menu--pf-c-menu__breadcrumb--PaddingBottom
1rem
.pf-c-menu--pf-c-menu__breadcrumb--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize
1rem
.pf-c-menu--pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize
1rem
.pf-c-menu--pf-c-menu--m-drilldown--c-menu--Top
0
.pf-c-menu--pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform
250ms
.pf-c-menu--pf-c-menu--m-drilldown--c-menu--Transition
transform 250ms
.pf-c-menu--pf-c-menu--m-drilldown__content--TransitionDuration--height
250ms
.pf-c-menu--pf-c-menu--m-drilldown__content--TransitionDuration--transform
250ms
.pf-c-menu--pf-c-menu--m-drilldown__content--Transition
transform 250ms, height 250ms
.pf-c-menu--pf-c-menu--m-drilldown__list--TransitionDuration--transform
250ms
.pf-c-menu--pf-c-menu--m-drilldown__list--Transition
transform 250ms
.pf-c-menu--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex
100
.pf-c-menu--pf-c-menu__footer--PaddingTop
1rem
.pf-c-menu--pf-c-menu__footer--PaddingRight
1rem
.pf-c-menu--pf-c-menu__footer--PaddingBottom
1rem
.pf-c-menu--pf-c-menu__footer--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__footer--BoxShadow
none
.pf-c-menu--pf-c-menu__footer--after--BorderTopWidth
1px
.pf-c-menu--pf-c-menu__footer--after--BorderTopColor
#d2d2d2
.pf-c-menu--pf-c-menu--m-scrollable__footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-menu--pf-c-menu--m-scrollable__footer--after--BorderTopWidth
0
.pf-c-menu--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth
1px
.pf-c-menu--pf-c-menu--m-nav--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-menu--pf-c-menu--m-nav--BackgroundColor
#212427
.pf-c-menu--pf-c-menu--m-nav__list--PaddingTop
0
.pf-c-menu--pf-c-menu--m-nav__list--PaddingBottom
0
.pf-c-menu--pf-c-menu--m-nav__list-item--hover--BackgroundColor
#3c3f42
.pf-c-menu--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-menu--pf-c-menu--m-nav__list-item--active--BackgroundColor
#3c3f42
.pf-c-menu--pf-c-menu--m-nav__item--PaddingRight
1.5rem
.pf-c-menu--pf-c-menu--m-nav__item--PaddingLeft
1.5rem
.pf-c-menu--pf-c-menu--m-nav__item--Color
#fff
.pf-c-menu--pf-c-menu--m-nav__item--FontSize
0.875rem
.pf-c-menu--pf-c-menu--m-nav__item--OutlineOffset
calc(0.25rem * -1)
.pf-c-menu--pf-c-menu--m-nav__item--before--BorderBottomColor
#3c3f42
.pf-c-menu--pf-c-menu--m-nav__item--before--BorderBottomWidth
1px
.pf-c-menu--pf-c-menu--m-nav__item--hover--after--BorderLeftColor
#8a8d90
.pf-c-menu--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth
1px
.pf-c-menu--pf-c-menu--m-nav__item--hover--after--Top
calc(1px * -1)
.pf-c-menu--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top
0
.pf-c-menu--pf-c-menu--m-nav__item-description--Color
#f0f0f0
.pf-c-menu--pf-c-menu--m-nav--c-menu--left-offset
0.25rem
.pf-c-menu--pf-c-menu--m-nav--c-menu--m-top--bottom-offset
0
.pf-c-menu--pf-c-menu--m-nav--c-menu--m-left--right-offset
0.25rem
.pf-c-menu--pf-c-menu--m-nav--c-menu--Top
calc(1px * -1)
.pf-c-menu--pf-c-menu--m-nav--c-menu--Left
calc(100% - 0.25rem)
.pf-c-menu--pf-c-menu--m-nav--c-menu--m-left--Right
calc(100% - 0.25rem)
.pf-c-menu--pf-c-menu--m-nav--c-menu--m-top--Bottom
calc(0 + 0)
.pf-c-menu--pf-c-menu--m-nav__list-item--first-child--c-menu--Top
0
.pf-c-menu__group--pf-hidden-visible--visible--Visibility
visible
.pf-c-menu__group--pf-hidden-visible--hidden--Display
none
.pf-c-menu__group--pf-hidden-visible--hidden--Visibility
hidden
.pf-c-menu__group--pf-hidden-visible--Display
block
.pf-c-menu__group--pf-hidden-visible--Visibility
visible
.pf-c-menu__group--pf-hidden-visible--visible--Display
block
.pf-m-hidden.pf-c-menu__group--pf-hidden-visible--Display
none
.pf-m-hidden.pf-c-menu__group--pf-hidden-visible--Visibility
hidden
.pf-c-menu.pf-m-top--pf-c-menu--m-flyout__menu--Top
auto
.pf-c-menu.pf-m-top--pf-c-menu--m-flyout__menu--Bottom
calc(0.5rem * -1)
.pf-c-menu.pf-m-left--pf-c-menu--m-flyout__menu--Right
calc(100% + 0px)
.pf-c-menu.pf-m-left--pf-c-menu--m-flyout__menu--Left
auto
.pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu--pf-c-menu--BoxShadow
none
.pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list--pf-c-menu__list--PaddingTop
0
.pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list--pf-c-menu__list--PaddingBottom
0
.pf-c-menu.pf-m-plain--pf-c-menu--BoxShadow
none
.pf-c-menu.pf-m-scrollable--pf-c-menu__content--MaxHeight
18.75rem
.pf-c-menu.pf-m-scrollable--pf-c-menu__footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-menu.pf-m-scrollable--pf-c-menu__footer--after--BorderTopWidth
0
.pf-c-menu.pf-m-nav--pf-c-menu--BackgroundColor
#212427
.pf-c-menu.pf-m-nav--pf-c-menu__list--PaddingTop
0
.pf-c-menu.pf-m-nav--pf-c-menu__list--PaddingBottom
0
.pf-c-menu.pf-m-nav--pf-c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-c-menu.pf-m-nav--pf-c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-menu.pf-m-nav--pf-c-menu__list-item--active--BackgroundColor
#3c3f42
.pf-c-menu.pf-m-nav--pf-c-menu__item--Color
#fff
.pf-c-menu.pf-m-nav--pf-c-menu__item--FontSize
0.875rem
.pf-c-menu.pf-m-nav--pf-c-menu__item--OutlineOffset
calc(0.25rem * -1)
.pf-c-menu.pf-m-nav--pf-c-menu__item--PaddingRight
1.5rem
.pf-c-menu.pf-m-nav--pf-c-menu__item--PaddingLeft
1.5rem
.pf-c-menu.pf-m-nav--pf-c-menu__item-description--Color
#f0f0f0
.pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top--pf-c-menu--m-nav--c-menu--Top
auto
.pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left--pf-c-menu--m-nav--c-menu--Left
auto
.pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child--pf-c-menu--m-nav__item--hover--after--Top
0
.pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu--pf-c-menu--m-nav--c-menu--Top
0
.pf-c-menu__breadcrumb .pf-c-breadcrumb--pf-c-breadcrumb__item--FontSize
1rem
.pf-c-menu__breadcrumb .pf-c-breadcrumb--pf-c-breadcrumb__heading--FontSize
1rem
.pf-c-menu__content .pf-c-menu__content--pf-c-menu__content--Height
auto
.pf-c-menu__header--pf-c-menu__item--PaddingTop
0.5rem
.pf-c-menu__header--pf-c-menu__item--PaddingRight
1rem
.pf-c-menu__header--pf-c-menu__item--PaddingBottom
0.5rem
.pf-c-menu__header--pf-c-menu__item--PaddingLeft
1rem
.pf-c-menu__header > .pf-c-menu__item--pf-c-menu__item--BackgroundColor
transparent
.pf-c-menu__header > .pf-c-menu__item:hover--pf-c-menu__item--BackgroundColor
#f0f0f0
.pf-c-menu__header > .pf-c-menu__item:focus--pf-c-menu__item--BackgroundColor
#f0f0f0
.pf-c-menu__header + .pf-c-menu__search--pf-c-menu__search--PaddingTop
0
.pf-c-menu__list--pf-hidden-visible--visible--Display
block
.pf-c-menu__list-item--pf-hidden-visible--visible--Display
flex
.pf-c-menu__list-item:hover--pf-c-menu__list-item--BackgroundColor
#f0f0f0
.pf-c-menu__list-item:hover--pf-c-menu__list-item--Color
#fff, inherit
.pf-c-menu__list-item:focus-within--pf-c-menu__list-item--BackgroundColor
#f0f0f0
.pf-c-menu__list-item:focus-within--pf-c-menu__list-item--Color
#fff, inherit
.pf-c-menu__list-item.pf-m-disabled--pf-c-menu__list-item--hover--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-disabled--pf-c-menu__list-item--focus-within--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-disabled--pf-c-menu__item--Color
#6a6e73
.pf-c-menu__list-item.pf-m-disabled--pf-c-menu__item-toggle-icon
#d2d2d2
.pf-c-menu__list-item.pf-m-load--pf-c-menu__list-item--hover--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-load--pf-c-menu__list-item--focus-within--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-load--pf-c-menu__item--Color
#06c
.pf-c-menu__list-item.pf-m-loading--pf-c-menu__list-item--hover--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-loading--pf-c-menu__list-item--focus-within--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-danger--pf-c-menu__item--Color
#c9190b, inherit
.pf-c-menu__item:hover--pf-c-menu__item-external-icon--Opacity
1
.pf-c-menu__item-action.pf-m-favorited--pf-c-menu__item-action--Color
#f0ab00
.pf-c-menu__item-action.pf-m-favorited--pf-c-menu__item-action--hover--Color
#c58c00
.pf-c-menu__item-action:hover--pf-c-menu__item-action--Color
#151515
.pf-c-menu__item-action:disabled--pf-c-menu__item-action--Color
#d2d2d2

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines