Skip to content
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 flyout

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

Props

NameTypeRequiredDefaultDescription
activeItemIdstring | numberNoitemId of the currently active item. You can also specify isActive on the MenuItem.
activeMenustringNoID of the currently active menu for the drilldown variant
aria-labelstringNoAccessibility label
childrenReact.ReactNodeNoAnything that can be rendered inside of the Menu
classNamestringNoAdditional classes added to the Menu
containsDrilldownbooleanNoIndicates if menu contains a drilldown menu
containsFlyoutbooleanNoIndicates if menu contains a flyout menu
drilldownItemPathstring[]NoIndicates the path of drilled in menu itemIds
drilledInMenusstring[]NoArray of menus that are drilled in
hasSearchInputbooleanNoSearch input of menu
idstringNoID of the menu
innerRefReact.Ref<any>NoForwarded ref
isMenuDrilledInbooleanNoIndicates if a menu is drilled into
isRootMenubooleanNoInternal flag indicating if the Menu is the root of a menu tree
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.
onDrillIn(fromItemId: string, toItemId: string, itemId: string) => voidNoCallback for drilling into a submenu
onDrillOut(toItemId: string, itemId: string) => voidNoCallback for drilling out of a submenu
onGetMenuHeight(menuId: string, height: number) => voidNoCallback for collecting menu heights
onSearchInputChange( event: React.FormEvent<HTMLInputElement> | React.SyntheticEvent<HTMLButtonElement>, value: string ) => voidNoA callback for when the input value changes.
onSelect(event?: React.MouseEvent, itemId?: string | number) => voidNoCallback for updating when item selection changes. You can also specify onClick on the MenuItem.
parentMenustringNoID of parent menu for drilldown menus
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
direction'down' | 'up'NoSub menu direction
drilldownMenuReact.ReactNodeNoDrilldown menu of the item. Should be a Menu or DrilldownMenu type.
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
isOnPathbooleanNoTrue if item is on current selection path
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
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoItems within group
getHeight(height: string) => voidNoCallback to return the height of the menu content
innerRefReact.Ref<any>NoForwarded ref
menuHeightstringNoHeight of the menu content
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoItems within input
innerRefReact.Ref<any>NoForwarded 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--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu--MinWidth
100%
.pf-c-menu--pf-c-menu--Width
auto
.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--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__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__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__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
0.5rem
.pf-c-menu--pf-c-menu__breadcrumb--PaddingRight
1rem
.pf-c-menu--pf-c-menu__breadcrumb--PaddingBottom
0.5rem
.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__content--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__content .pf-c-menu--pf-c-menu--BoxShadow
none
.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__list-item:hover--pf-c-menu__list-item--BackgroundColor
#f0f0f0
.pf-c-menu__list-item:focus-within--pf-c-menu__list-item--BackgroundColor
#f0f0f0
.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__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