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
Props
Menu
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| activeItemId | string | number | No | itemId of the currently active item. You can also specify isActive on the MenuItem. | |
| activeMenu | string | No | ID of the currently active menu for the drilldown variant | |
| aria-label | string | No | Accessibility label | |
| children | React.ReactNode | No | Anything that can be rendered inside of the Menu | |
| className | string | No | Additional classes added to the Menu | |
| containsDrilldown | boolean | No | Indicates if menu contains a drilldown menu | |
| containsFlyout | boolean | No | Indicates if menu contains a flyout menu | |
| drilldownItemPath | string[] | No | Indicates the path of drilled in menu itemIds | |
| drilledInMenus | string[] | No | Array of menus that are drilled in | |
| hasSearchInput | boolean | No | Search input of menu | |
| id | string | No | ID of the menu | |
| innerRef | React.Ref<any> | No | Forwarded ref | |
| isMenuDrilledIn | boolean | No | Indicates if a menu is drilled into | |
| isRootMenu | boolean | No | Internal flag indicating if the Menu is the root of a menu tree | |
| onActionClick | (event?: any, itemId?: any, actionId?: any) => void | No | Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction. | |
| onDrillIn | (fromItemId: string, toItemId: string, itemId: string) => void | No | Callback for drilling into a submenu | |
| onDrillOut | (toItemId: string, itemId: string) => void | No | Callback for drilling out of a submenu | |
| onGetMenuHeight | (menuId: string, height: number) => void | No | Callback for collecting menu heights | |
| onSearchInputChange | ( event: React.FormEvent<HTMLInputElement> | React.SyntheticEvent<HTMLButtonElement>, value: string ) => void | No | A callback for when the input value changes. | |
| onSelect | (event?: React.MouseEvent, itemId?: string | number) => void | No | Callback for updating when item selection changes. You can also specify onClick on the MenuItem. | |
| parentMenu | string | No | ID of parent menu for drilldown menus | |
| selected | any | any[] | No | Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem. |
MenuList
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | Yes | Anything that can be rendered inside of menu list | |
| className | string | No | Additional classes added to the menu list | |
| innerRef | React.Ref<any> | No | Forwarded ref |
MenuItem
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| actions | React.ReactNode | No | Render item with one or more actions | |
| aria-label | string | No | Accessibility label | |
| children | React.ReactNode | No | Content rendered inside the menu list item. | |
| className | string | No | Additional classes added to the menu list item | |
| component | React.ReactNode | No | Component used to render the menu item | |
| description | React.ReactNode | No | Description of the menu item | |
| direction | 'down' | 'up' | No | Sub menu direction | |
| drilldownMenu | React.ReactNode | No | Drilldown menu of the item. Should be a Menu or DrilldownMenu type. | |
| flyoutMenu | React.ReactNode | No | Flyout menu | |
| icon | React.ReactNode | No | Render item with icon | |
| innerRef | React.Ref<any> | No | Forwarded ref | |
| isActive | boolean | No | Flag indicating whether the item is active | |
| isDisabled | boolean | No | Render item as disabled option | |
| isExternalLink | boolean | No | Render external link icon | |
| isFavorited | boolean | No | Flag indicating if the item is favorited | |
| isOnPath | boolean | No | True if item is on current selection path | |
| isSelected | boolean | No | Flag indicating if the option is selected | |
| itemId | any | No | Identifies the component in the Menu onSelect or onActionClick callback | |
| onClick | (event?: any) => void | No | Callback for item click | |
| onShowFlyout | (event?: any) => void | No | Callback function when mouse leaves trigger | |
| to | string | No | Target navigation link |
MenuItemAction
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| actionId | any | No | Identifies the action item in the onActionClick on the Menu | |
| aria-label | string | No | Accessibility label | |
| className | string | No | Additional classes added to the action button | |
| icon | 'favorites' | React.ReactNode | No | The action icon to use | |
| innerRef | React.Ref<any> | No | Forwarded ref | |
| isDisabled | boolean | No | Disables action, can also be specified on the MenuItem instead | |
| isFavorited | boolean | No | Flag indicating if the item is favorited | |
| onClick | (event?: any) => void | No | Callback on action click, can also specify onActionClick on the Menu instead |
MenuContent
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | Items within group | |
| getHeight | (height: string) => void | No | Callback to return the height of the menu content | |
| innerRef | React.Ref<any> | No | Forwarded ref | |
| menuHeight | string | No | Height of the menu content |
MenuInput
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | Items within input | |
| innerRef | React.Ref<any> | No | 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--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
