Examples
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.
Props
Menu
| Name | Type | Default | Description |
|---|---|---|---|
| activeItemIdBeta | string | number | itemId of the currently active item. You can also specify isActive on the MenuItem. | |
| activeMenuBeta | string | ID of the currently active menu for the drilldown variant | |
| aria-label | string | Accessibility label | |
| children | React.ReactNode | Anything that can be rendered inside of the Menu | |
| className | string | Additional classes added to the Menu | |
| containsDrilldownBeta | boolean | Indicates if menu contains a drilldown menu | |
| containsFlyoutBeta | boolean | Indicates if menu contains a flyout menu | |
| drilldownItemPathBeta | string[] | Indicates the path of drilled in menu itemIds | |
| drilledInMenusBeta | string[] | Array of menus that are drilled in | |
| hasSearchInput | boolean | Search input of menu | |
| id | string | ID of the menu | |
| isMenuDrilledInBeta | boolean | Indicates if a menu is drilled into | |
| isNavFlyoutBeta | boolean | Indicating that the menu should have nav flyout styling | |
| isPlain | boolean | Indicates if the menu should be without the outer box-shadow | |
| isRootMenu | boolean | Internal flag indicating if the Menu is the root of a menu tree | |
| isScrollable | boolean | Indicates if the menu should be srollable | |
| onActionClick | (event?: any, itemId?: any, actionId?: any) => void | Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction. | |
| onDrillInBeta | (fromItemId: string, toItemId: string, itemId: string) => void | Callback for drilling into a submenu | |
| onDrillOutBeta | (toItemId: string, itemId: string) => void | Callback for drilling out of a submenu | |
| onGetMenuHeightBeta | (menuId: string, height: number) => void | Callback for collecting menu heights | |
| onSearchInputChange | ( event: React.FormEvent<HTMLInputElement> | React.SyntheticEvent<HTMLButtonElement>, value: string ) => void | A callback for when the input value changes. | |
| onSelect | (event?: React.MouseEvent, itemId?: string | number) => void | Callback for updating when item selection changes. You can also specify onClick on the MenuItem. | |
| parentMenuBeta | string | ID of parent menu for drilldown menus | |
| selected | any | any[] | Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem. |
MenuList
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Anything that can be rendered inside of menu list |
| className | string | Additional classes added to the menu list |
MenuItem
| Name | Type | Default | Description |
|---|---|---|---|
| actions | React.ReactNode | Render item with one or more actions | |
| aria-label | string | Accessibility label | |
| children | React.ReactNode | Content rendered inside the menu list item. | |
| className | string | Additional classes added to the menu list item | |
| component | React.ElementType<any> | React.ComponentType<any> | Component used to render the menu item | |
| description | React.ReactNode | Description of the menu item | |
| directionBeta | 'down' | 'up' | Sub menu direction | |
| drilldownMenuBeta | React.ReactNode | (() => React.ReactNode) | Drilldown menu of the item. Should be a Menu or DrilldownMenu type. | |
| flyoutMenuBeta | React.ReactElement | Flyout menu | |
| hasCheckBeta | boolean | Flag indicating the item has a checkbox | |
| icon | React.ReactNode | Render item with icon | |
| isActive | boolean | Flag indicating whether the item is active | |
| isDisabled | boolean | Render item as disabled option | |
| isExternalLink | boolean | Render external link icon | |
| isFavorited | boolean | Flag indicating if the item is favorited | |
| isLoadButton | boolean | Flag indicating if the item causes a load | |
| isLoading | boolean | Flag indicating a loading state | |
| isOnPathBeta | boolean | True if item is on current selection path | |
| isSelected | boolean | Flag indicating if the option is selected | |
| itemId | any | Identifies the component in the Menu onSelect or onActionClick callback | |
| onClick | (event?: any) => void | Callback for item click | |
| onShowFlyoutBeta | (event?: any) => void | Callback function when mouse leaves trigger | |
| to | string | Target navigation link |
MenuItemAction
| Name | Type | Default | Description |
|---|---|---|---|
| actionId | any | Identifies the action item in the onActionClick on the Menu | |
| aria-label | string | Accessibility label | |
| className | string | Additional classes added to the action button | |
| icon | 'favorites' | React.ReactNode | The action icon to use | |
| innerRef | React.Ref<any> | Forwarded ref | |
| isDisabled | boolean | Disables action, can also be specified on the MenuItem instead | |
| isFavorited | boolean | Flag indicating if the item is favorited | |
| onClick | (event?: any) => void | Callback on action click, can also specify onActionClick on the Menu instead |
MenuContent
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Items within group | |
| getHeight | (height: string) => void | Callback to return the height of the menu content | |
| innerRef | React.Ref<any> | Forwarded ref | |
| maxMenuHeight | string | Maximum height of menu content | |
| menuHeight | string | Height of the menu content |
MenuInput
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Items within input | |
| innerRef | React.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 | ||