Skip to content
Patternfly Logo

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 flyout

With filtering


With separator(s)

With titled groups

With description

With actions

Actions

With favorites

All actions

Option single select

Option multi select

Props

NameTypeRequiredDefaultDescription
activeItemIdanyNoitemId of the currently active item. You can also specify isActive on the MenuItem.
aria-labelstringNoAccessibility label
childrenReact.ReactNodeNoAnything that can be rendered inside of the Menu
classNamestringNoAdditional classes added to the Menu
containsFlyoutbooleanNoIndicates if menu contains a flyout menu
hasSearchInputbooleanNoSearch input of menu
innerRefReact.Ref<any>NoForwarded ref
onActionClick(event?: any, itemId?: any, actionId?: any) => voidNoCallback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction.
onSearchInputChange( event: React.FormEvent<HTMLInputElement> | React.SyntheticEvent<HTMLButtonElement>, value: string ) => voidNoA callback for when the input value changes.
onSelect(event?: any, itemId?: any) => voidNoCallback for updating when item selection changes. You can also specify onClick on the MenuItem.
selectedany | any[]NoSingle itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem.
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesAnything that can be rendered inside of menu list
classNamestringNoAdditional classes added to the menu list
innerRefReact.Ref<any>NoForwarded ref
NameTypeRequiredDefaultDescription
actionsReact.ReactNodeNoRender item with one or more actions
aria-labelstringNoAccessibility label
childrenReact.ReactNodeNoContent rendered inside the menu list item.
classNamestringNoAdditional classes added to the menu list item
componentReact.ReactNodeNoComponent used to render the menu item
descriptionReact.ReactNodeNoDescription of the menu item
flyoutMenuReact.ReactNodeNoFlyout menu
iconReact.ReactNodeNoRender item with icon
innerRefReact.Ref<any>NoForwarded ref
isActivebooleanNoFlag indicating whether the item is active
isDisabledbooleanNoRender item as disabled option
isExternalLinkbooleanNoRender external link icon
isFavoritedbooleanNoFlag indicating if the item is favorited
isSelectedbooleanNoFlag indicating if the option is selected
itemIdanyNoIdentifies the component in the Menu onSelect or onActionClick callback
onClick(event?: any) => voidNoCallback for item click
onShowFlyout(event?: any) => voidNoCallback function when mouse leaves trigger
tostringNoTarget navigation link
NameTypeRequiredDefaultDescription
actionIdanyNoIdentifies the action item in the onActionClick on the Menu
aria-labelstringNoAccessibility label
classNamestringNoAdditional classes added to the action button
icon'favorites' | React.ReactNodeNoThe action icon to use
innerRefReact.Ref<any>NoForwarded ref
isDisabledbooleanNoDisables action, can also be specified on the MenuItem instead
isFavoritedbooleanNoFlag indicating if the item is favorited
onClick(event?: any) => voidNoCallback on action click, can also specify onActionClick on the Menu instead

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--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--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__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-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-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--pf-c-menu--m-drilldown--Width
auto
.pf-c-menu--pf-c-menu--m-drilldown--Height
auto
.pf-c-menu--pf-c-menu--m-drilldown--TransitionDuration--transform
250ms
.pf-c-menu--pf-c-menu--m-drilldown--TransitionDuration--height
250ms
.pf-c-menu--pf-c-menu--m-drilldown--Transition
transform 250ms, height 250ms
.pf-c-menu--pf-c-menu--m-drilldown--c-menu--Top
calc(0.5rem * -1)
.pf-c-menu--pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform
250ms
.pf-c-menu--pf-c-menu--m-drilldown--c-menu--TransitionDuration--visibility
250ms
.pf-c-menu--pf-c-menu--m-drilldown--c-menu--Transition
transform 250ms, visibility 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
600
.pf-c-menu.pf-m-drilldown .pf-c-menu--pf-c-menu--BoxShadow
none
.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