Patternfly Logo

Menu

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Basic

With icons

With expanded toggle

With flyout

Drilldown

Drilldown level two

Drilldown level three

Drilldown level four

Width modified drilldown

With filtering


With separator(s)

With titled groups

With description

With actions

Actions

Option single select

Option multi select

Documentation

Overview

Accessibility

AttributeAppliedOutcome
disabledbutton.pf-c-menu__itemWhen the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.
aria-disabled="true"a.pf-c-menu__itemWhen the menu item uses a link element, removes it from keyboard focus.
tabindex="-1"a.pf-c-menu__itemWhen 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-iconHides the icon from assistive technologies.
aria-label="Not starred".pf-c-menu__item-action-icon.pf-m-favoriteProvides 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-favoritedProvides an accessible label indicating that the favorite action is selected.

Usage

ClassApplied toOutcome
.pf-c-menu<div>Initiates the menu. Required
.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>Initiates the menu item. Required
.pf-c-menu__item-main<div>Initiates the menu item main container. Required
.pf-c-menu__item-text<span>Initiates the menu item text. Required
.pf-c-menu__item-description<div>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-m-favorite.pf-c-menu__item-actionModifies the menu item action to handle the favorite icon.
.pf-m-favorited.pf-c-menu__item-action.pf-m-favoriteModifies the menu item action icon to be favorited.
.pf-m-selected.pf-c-menu__itemModifies the menu item to be selected.
.pf-m-flyout.pf-c-menuModifies the menu so that all nested .pf-c-menu elements "flyout".
.pf-m-drilldown.pf-c-menuModifies 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-itemModifies 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-menuModifies the menu list for drilled in state.
--pf-c-menu--m-drilldown--Width: {width}.pf-c-menu.pf-m-drilldownModifies the width of the drilldown menu. The default value is auto.
--pf-c-menu--m-drilldown--Height: {height}.pf-c-menu.pf-m-drilldownModifies the height of the drilldown menu. The default value is auto.

CSS variables

.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--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu--m-flyout__menu--Top
calc(0.5rem * -1)
.pf-c-menu--pf-c-menu--c-divider--MarginTop
0.5rem
.pf-c-menu--pf-c-menu--c-divider--MarginBottom
0.5rem
.pf-c-menu--pf-c-menu__search--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__search--PaddingRight
1rem
.pf-c-menu--pf-c-menu__search--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu__search--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__list-item--Color
#151515
.pf-c-menu--pf-c-menu__list-item--hover--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__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--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__item--disabled--Color
#6a6e73
.pf-c-menu--pf-c-menu__group-title--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__group-title--PaddingRight
1rem
.pf-c-menu--pf-c-menu__group-title--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu__group-title--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__group-title--FontSize
0.875rem
.pf-c-menu--pf-c-menu__group-title--FontWeight
700
.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-toggle-icon--PaddingRight
0.5rem
.pf-c-menu--pf-c-menu__item-toggle-icon--PaddingLeft
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-main__external-icon--MarginLeft
0.5rem
.pf-c-menu--pf-c-menu__item-main__external-icon--Color
#06c
.pf-c-menu--pf-c-menu__item-main__external-icon--FontSize
0.625rem
.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-icon--Color
#6a6e73
.pf-c-menu--pf-c-menu__item-action-icon--Height
calc(1rem * 1.5)
.pf-c-menu--pf-c-menu__item-action--hover__icon--Color
#151515
.pf-c-menu--pf-c-menu__item-action--m-favorite__icon--Color
#d2d2d2
.pf-c-menu--pf-c-menu__item-action--m-favorite__icon--FontSize
0.625rem
.pf-c-menu--pf-c-menu__item-action--m-favorite--m-favorited__icon--Color
#f0ab00
.pf-c-menu__list-item:hover:not(.pf-m-disabled)--pf-c-menu__list-item--Color
#151515
.pf-c-menu__list-item:hover:not(.pf-m-disabled)--pf-c-menu__list-item--BackgroundColor
#f0f0f0
.pf-c-menu__list-item.pf-m-disabled .pf-c-menu__item--pf-c-menu__item--Color
#6a6e73
.pf-c-menu__item:disabled--pf-c-menu__item--Color
#6a6e73
.pf-c-menu__item-action:hover--pf-c-menu__item-action-icon--Color
#151515
.pf-c-menu__item-action.pf-m-favorite--pf-c-menu__item-action-icon--Color
#d2d2d2
.pf-c-menu__item-action.pf-m-favorite.pf-m-favorited--pf-c-menu__item-action-icon--Color
#f0ab00

View source on Github