Skip to content
Patternfly Logo

Menu

Examples

Basic

With icons

With checkbox Beta

Filtering with text input


With separator(s)

With titled groups

With description

With actions

Actions

With favorites

All actions

Option single select

Option multi select

With drilldown Beta

With drilldown - initial drill in state Beta

To render an initially drilled in menu, the menuDrilledIn, drilldownPath, and activeMenu states must be set to an initial state. The menuHeights state must also be set, defining the height of the root menu. The setHeight function passed into the onGetMenuHeight property must also account for updating heights, other than the root menu, as menus drill in and out of view.

With drilldown - submenu functions Beta

With drilldown breadcrumbs Beta


Scrollable

Scrollable with custom menu height

With view more

Props

*required
NameTypeDefaultDescription
activeItemIdBetastring | numberitemId of the currently active item. You can also specify isActive on the MenuItem.
activeMenuBetastringID of the currently active menu for the drilldown variant
aria-labelstringAccessibility label
childrenReact.ReactNodeAnything that can be rendered inside of the Menu
classNamestringAdditional classes added to the Menu
containsDrilldownBetabooleanIndicates if menu contains a drilldown menu
containsFlyoutBetabooleanIndicates if menu contains a flyout menu
drilldownItemPathBetastring[]Indicates the path of drilled in menu itemIds
drilledInMenusBetastring[]Array of menus that are drilled in
hasSearchInputbooleanSearch input of menu
idstringID of the menu
isMenuDrilledInBetabooleanIndicates if a menu is drilled into
isNavFlyoutBetabooleanIndicating that the menu should have nav flyout styling
isPlainbooleanIndicates if the menu should be without the outer box-shadow
isRootMenubooleanInternal flag indicating if the Menu is the root of a menu tree
isScrollablebooleanIndicates if the menu should be srollable
onActionClick(event?: any, itemId?: any, actionId?: any) => voidCallback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction.
onDrillInBeta(fromItemId: string, toItemId: string, itemId: string) => voidCallback for drilling into a submenu
onDrillOutBeta(toItemId: string, itemId: string) => voidCallback for drilling out of a submenu
onGetMenuHeightBeta(menuId: string, height: number) => voidCallback for collecting menu heights
onSearchInputChange( event: React.FormEvent<HTMLInputElement> | React.SyntheticEvent<HTMLButtonElement>, value: string ) => voidA callback for when the input value changes.
onSelect(event?: React.MouseEvent, itemId?: string | number) => voidCallback for updating when item selection changes. You can also specify onClick on the MenuItem.
parentMenuBetastringID of parent menu for drilldown menus
selectedany | any[]Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem.
*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered inside of menu list
classNamestringAdditional classes added to the menu list
*required
NameTypeDefaultDescription
actionsReact.ReactNodeRender item with one or more actions
aria-labelstringAccessibility label
childrenReact.ReactNodeContent rendered inside the menu list item.
classNamestringAdditional classes added to the menu list item
componentReact.ElementType<any> | React.ComponentType<any>Component used to render the menu item
descriptionReact.ReactNodeDescription of the menu item
directionBeta'down' | 'up'Sub menu direction
drilldownMenuBetaReact.ReactNode | (() => React.ReactNode)Drilldown menu of the item. Should be a Menu or DrilldownMenu type.
flyoutMenuBetaReact.ReactElementFlyout menu
hasCheckBetabooleanFlag indicating the item has a checkbox
iconReact.ReactNodeRender item with icon
isActivebooleanFlag indicating whether the item is active
isDisabledbooleanRender item as disabled option
isExternalLinkbooleanRender external link icon
isFavoritedbooleanFlag indicating if the item is favorited
isLoadButtonbooleanFlag indicating if the item causes a load
isLoadingbooleanFlag indicating a loading state
isOnPathBetabooleanTrue if item is on current selection path
isSelectedbooleanFlag indicating if the option is selected
itemIdanyIdentifies the component in the Menu onSelect or onActionClick callback
onClick(event?: any) => voidCallback for item click
onShowFlyoutBeta(event?: any) => voidCallback function when mouse leaves trigger
tostringTarget navigation link
*required
NameTypeDefaultDescription
actionIdanyIdentifies the action item in the onActionClick on the Menu
aria-labelstringAccessibility label
classNamestringAdditional classes added to the action button
icon'favorites' | React.ReactNodeThe action icon to use
innerRefReact.Ref<any>Forwarded ref
isDisabledbooleanDisables action, can also be specified on the MenuItem instead
isFavoritedbooleanFlag indicating if the item is favorited
onClick(event?: any) => voidCallback on action click, can also specify onActionClick on the Menu instead
*required
NameTypeDefaultDescription
childrenReact.ReactNodeItems within group
getHeight(height: string) => voidCallback to return the height of the menu content
innerRefReact.Ref<any>Forwarded ref
maxMenuHeightstringMaximum height of menu content
menuHeightstringHeight of the menu content
*required
NameTypeDefaultDescription
childrenReact.ReactNodeItems within input
innerRefReact.Ref<any>Forwarded ref

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-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.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-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__footer--after--BorderBottomWidth
0
.pf-c-menu--pf-c-menu__footer--after--BorderBottomColor
#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