Examples
Basic menus
A menu may contain multiple variations of <MenuItem>
components. The following example shows a few different states of menu items, where they may:
- Use the
itemId
property to link to callbacks. In this example, theonSelect
property logs information to the console when a menu item is selected. In practice, specific actions can be linked toonSelect
callbacks. - Use the
to
property to direct users to other resources or webpages after selecting a menu item, and theonClick
property to pass in a callback for specific menu items. - Use the
isDisabled
property to disable a menu item. - Use the
isPlain
property to remove the outer box shadow and style the menu plainly instead.
Danger menu item
To indicate that a <MenuItem>
is connected to a potentially destructive action, use the isDanger
property. The "Delete" item in the following example demonstrates how danger items look.
With icons
Use the icon
property to add a familiar icon before a <MenuItem>
to accelerate text label recognition.
With actions
To connect a menu item to an action icon, add a <MenuItemAction>
to a <MenuItem>
, and use the icon
property to load an easily recognizable icon.
To trigger an action when any menu action icon is selected, pass a callback to the onActionClick
property of the <Menu>
. The following example logs to the console any time any action icon is selected.
To trigger an action when a specific item's action icon is selected, pass in the onClick
property to that <MenuItemAction>
. The following example logs "clicked on code icon" to the console when the "code" icon is selected.
With links
Use the to
property to add a link to a <MenuItem>
that directs users to a new page when the item is selected. Use the isExternalLink
property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it.
With descriptions
Use the description
property to add short descriptive text below any menu item that needs additional context.
Beta
Item checkboxUse the hasCheck
property to add a checkbox to a <MenuItem>
. Use the isSelected
property to indicate when a <MenuItem>
is selected.
Separated items
Use a divider to visually separate <MenuContent>
. Use the component
property to specify the type of divider component to use.
Titled groups of items
Add a <MenuGroup>
to organize <MenuContent>
and use the label
property to title a group of menu items. Use the labelHeadingLevel
property to assign a heading level to the menu group label.
With favorites
The following menu example allows users to favorite menu items, an action that duplicates a menu item and places it in a separate group at the top of the menu. The isFavorited
property identifies items that a user has favorited.
Filtering with search input
A search input component can be placed within <MenuInput>
to render a search input at the top of the menu. In the following example, the onChange
property of the text input is passed a callback that filters menu items as a user types.
Option single select menu
The following example demonstrates a single option select menu that persists a selected menu item. Use the selected
property on the <Menu>
to label a selected item with a checkmark. You can also use the isSelected
property on a <MenuItem>
to indicate that it is selected.
You must also use the role
property on the <Menu>
with a value of "listbox"
when using a non-checkbox select menu.
Option multi select menu
To persist multiple selections that a user makes, use a multiple option select menu. To enable multi select, pass an array containing each selected itemId
to the selected
property on the <Menu>
, and pass the isAriaMultiselectable
property on the <MenuList>
.
Similar to a single select menu, you must also pass role="listbox"
to the <Menu>
.
Scrollable menus
Use the isScrollable
property to make a long <Menu>
scrollable and visually condensed.
Scrollable menu with custom height
Adjust the visual size of a scrollable menu by using the menuHeight
property within <MenuContent>
. This example adjusts the height to 200px.
With view more
If you want to initially render only a certain number of menu items within a large menu, you can add a "view more" menu item with a callback passed into its onClick
property that will render additional menu items.
In this example, 3 additional menu items are revealed each time the "view more" option is selected, with a loading icon simulating a network call to fetch more items. After all items are visible, the "view more" link disappears.
Beta
With drilldownUse a drilldown menu to contain different levels of menu items. When a parent menu item (an item that has a submenu of children) is selected, the menu is replaced with the children items.
- To indicate that a menu contains a drilldown, use the
containsDrilldown
property. - To indicate the path of drilled-in menu item ids, use the
drilldownItemPath
property. - Pass in an array of drilled-in menus with the
drilledInMenus
property. - Use the
onDrillIn
andonDrillOut
properties to contain callbacks for drilling into and drilling out of a submenu, respectively. - To account for updated heights as menus drill in and out of use, use the
onGetMenuHeight
property. When starting from a drilled-in state, theonGetMenuHeight
property must define the height of the root menu.
Beta
Initially drilled-in menuTo render an initially drilled-in menu, the drilldownItemPath
, drilledInMenus
, and activeMenu
properties must be set to default values.
Beta
With drilldown - submenu functionsFor added flexibility with large menus, you may create a menu by passing a function to drilldownMenu
. This approach allows you to create menu items dynamically, rather than creating everything up front.
Beta
With drilldown breadcrumbsUse breadcrumbs when a drilldown menu has more than 2 levels to offer users better navigation.
To control the height of a menu, use the maxMenuHeight
property. Selecting the "Set max menu height" checkbox in the following example sets the menu height to "100px" and makes the menu scrollable.
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 | ( event: React.KeyboardEvent | React.MouseEvent, fromItemId: string, toItemId: string, itemId: string ) => void | Callback for drilling into a submenu | |
onDrillOutBeta | (event: React.KeyboardEvent | React.MouseEvent, 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. | |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
parentMenuBeta | string | ID of parent menu for drilldown menus | |
roleBeta | string | Determines the accessible role of the menu. For a non-checkbox menu that can have one or more items selected, pass in "listbox". | |
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 | |
isAriaMultiselectableBeta | boolean | false | Indicates to assistive technologies whether more than one item can be selected for a non-checkbox menu. Only applies when the menu's role is "listbox". |
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. Should not be used if the to prop is defined. | |
hasCheck | boolean | Flag indicating the item has a checkbox | |
icon | React.ReactNode | Render item with icon | |
isActive | boolean | Flag indicating whether the item is active | |
isDanger | boolean | Flag indicating the item is in danger state | |
isDisabled | boolean | Render item as disabled option | |
isExternalLink | boolean | Render external link icon | |
isFavorited | boolean | Flag indicating if the item is favorited | |
isFocused | boolean | Flag indicating the item is focused | |
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. Should not be used if the flyout prop is defined. |
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 |
MenuGroup
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Items within group | |
className | string | Additional classes added to the MenuGroup | |
innerRef | React.Ref<any> | Forwarded ref | |
label | React.ReactNode | Group label | |
labelHeadingLevel | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | Group label heading level. Default is h1. | |
titleId | string | ID for title label |
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-danger__item--Color | #c9190b | ||
.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.75rem | ||
.pf-c-menu | --pf-c-menu__group-title--FontWeight | 400 | ||
.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--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 | ||