Skip to content
Patternfly Logo

Menu

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack.

Examples

Basic

With icons

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

With drilldown breadcrumbs


Scrollable

With view more

Props

*required
NameTypeDefaultDescription
activeItemIdstring | numberitemId of the currently active item. You can also specify isActive on the MenuItem.
activeMenustringID 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
containsDrilldownbooleanIndicates if menu contains a drilldown menu
containsFlyoutbooleanIndicates if menu contains a flyout menu
drilldownItemPathstring[]Indicates the path of drilled in menu itemIds
drilledInMenusstring[]Array of menus that are drilled in
hasSearchInputbooleanSearch input of menu
idstringID of the menu
isMenuDrilledInbooleanIndicates if a menu is drilled into
isRootMenubooleanInternal flag indicating if the Menu is the root of a menu tree
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.
onDrillIn(fromItemId: string, toItemId: string, itemId: string) => voidCallback for drilling into a submenu
onDrillOut(toItemId: string, itemId: string) => voidCallback for drilling out of a submenu
onGetMenuHeight(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.
parentMenustringID 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>'button'Component used to render the menu item
descriptionReact.ReactNodenullDescription of the menu item
direction'down' | 'up'Sub menu direction
drilldownMenuReact.ReactNodeDrilldown menu of the item. Should be a Menu or DrilldownMenu type.
flyoutMenuReact.ReactElementFlyout menu
iconReact.ReactNodeRender item with icon
isActivebooleannullFlag indicating whether the item is active
isDisabledbooleanfalseRender item as disabled option
isExternalLinkbooleanfalseRender external link icon
isFavoritedbooleannullFlag indicating if the item is favorited
isLoadButtonbooleanfalseFlag indicating if the item causes a load
isLoadingbooleanfalseFlag indicating a loading state
isOnPathbooleanTrue if item is on current selection path
isSelectedbooleannullFlag indicating if the option is selected
itemIdanynullIdentifies the component in the Menu onSelect or onActionClick callback
onClick(event?: any) => void() => {}Callback for item click
onShowFlyout(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--m-flyout__menu--Top
calc(0.5rem * -1 + 0px)
.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-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--m-favorited--Color
#f0ab00
.pf-c-menu--pf-c-menu__item-action--m-favorited--hover--Color
#c58c00
.pf-c-menu--pf-c-menu__list-item--m-disabled__item-action--Color
#d2d2d2
.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__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-drilldown > .pf-c-menu__content .pf-c-menu--pf-c-menu--BoxShadow
none
.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-scrollable--pf-c-menu__footer--after--BorderBottomWidth
1px
.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
undefined, 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
undefined, 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-action--Color
#d2d2d2
.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__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

View source on GitHub