PatternFly

Dropdown

Examples

Dropdown builds off of the Menu component suite to wrap commonly used properties and functions for a dropdown menu. See the Menu documentation for a full list of properties that may be passed through Dropdown to further customize the dropdown menu, or the custom menu examples for additional examples of fully functional menus.

Basic dropdowns

Basic dropdowns present users with a menu of items upon clicking a dropdown toggle.

A <Dropdown> uses a menu toggle, which is passed to the toggle property, as well as a <DropdownList> with multiple <DropdownItem> components. To allow a dropdown to change the open state of the menu, pass the isOpen property into the onOpenChange callback.

The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:

  • Use the isDisabled property to disable an item.
  • Use the onClick property to trigger a callback for an action.

This example also uses a <Divider> which passes in key=”separator” to split the menu into 2 sections with a horizontal line.

With kebab toggle

To style a dropdown menu's toggle with a kebab icon, pass a "plain" <MenuToggle> to the toggle property. When there isn't enough space for a labeled button, a kebab icon can be used to toggle the dropdown menu open or closed.

With groups of items

To group sets of related dropdown items together, use a <DropdownGroup>. When more than 1 <DropdownGroup> is created in a menu, use the label and labelHeadingLevel properties to assign a name and heading level to each group.

With item descriptions

To provide users with more context about a <DropdownItem>, pass a short message to description property. As shown in the example below, an item's description will appear below its label.

Props

See the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
togglerequiredDropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode)Dropdown toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property.
childrenReact.ReactNodeAnything which can be rendered in a dropdown.
classNamestringClasses applied to root element of dropdown.
isOpenbooleanFlag to indicate if menu is opened.
isPlainbooleanIndicates if the menu should be without the outer box-shadow.
isScrollablebooleanIndicates if the menu should be scrollable.
maxMenuHeightstringMaximum height of dropdown menu
menuHeightstringHeight of the dropdown menu
onOpenChange(isOpen: boolean) => voidCallback to allow the dropdown component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys.
onOpenChangeKeysBetastring[]Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable.
onSelect(event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => voidFunction callback called when user selects item.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
popperPropsDropdownPopperPropsAdditional properties to pass to the Popper
shouldFocusToggleOnSelectbooleanFlag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus.
zIndexnumberz-index of the dropdown menu
See the MenuGroup section of the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a dropdown group.
classNamestringClasses applied to root element of dropdown group
labelstringLabel of the dropdown group
labelHeadingLevelNo type info'h1'
See the MenuItem section of the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
childrenReact.ReactNodeAnything which can be rendered in a dropdown item
classNamestringClasses applied to root element of dropdown item
descriptionReact.ReactNodeDescription of the dropdown item
isAriaDisabledbooleanRender item as aria-disabled option
isDisabledbooleanRender item as disabled option
onClick(event?: any) => voidCallback for item click
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
tooltipPropsTooltipPropsProps for adding a tooltip to a menu item
valueanyIdentifies the component in the dropdown onSelect callback
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a dropdown list
classNamestringClasses applied to root element of dropdown list
*required
NameTypeDefaultDescription
badgeBadgeProps | React.ReactNodeOptional badge rendered inside the toggle, after the children content
childrenReact.ReactNodeContent rendered inside the toggle
classNamestringAdditional classes added to the toggle
iconReact.ReactNodeOptional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component.
isDisabledbooleanFlag indicating the toggle is disabled
isExpandedbooleanFlag indicating the toggle has expanded styling
isFullHeightbooleanFlag indicating the toggle is full height
isFullWidthbooleanFlag indicating the toggle takes up the full width of its parent
splitButtonOptionsSplitButtonOptionsObject used to configure a split button menu toggle
statusBeta'success' | 'warning' | 'danger'Status styles of the menu toggle
statusIconReact.ReactNodeOverrides the status icon
variant'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead'Variant styles of the menu toggle
*required
NameTypeDefaultDescription
toggleNoderequiredReact.ReactNodeDropdown toggle node.
toggleRefReact.RefObject<HTMLButtonElement>Reference to the toggle.
*required
NameTypeDefaultDescription
appendToHTMLElement | (() => HTMLElement) | 'inline'The container to append the popper to. Defaults to 'inline'.
direction'up' | 'down'Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips.
enableFlipbooleanEnable to flip the popper when it reaches the boundary
maxWidthstring | 'trigger'Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width
minWidthstring | 'trigger'Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width
position'right' | 'left' | 'center' | 'start' | 'end'Horizontal position of the popper
preventOverflowbooleanFlag to prevent the popper from overflowing its container and becoming partially obscured.
widthstring | 'trigger'Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width

TooltipProps

*required
NameTypeDefaultDescription
contentrequiredReact.ReactNodeTooltip content
animationDurationnumberCSS fade transition animation duration
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement)The element to append the tooltip to, defaults to body
aria'describedby' | 'labelledby' | 'none'aria-labelledby or aria-describedby for tooltip. The trigger will be cloned to add the aria attribute, and the corresponding id in the form of 'pf-tooltip-#' is added to the content container. If you don't want that or prefer to add the aria attribute yourself on the trigger, set aria to 'none'.
childrenReactElement<any>The trigger reference element to which the Tooltip is relatively placed to. If you cannot wrap the element with the Tooltip, you can use the triggerRef prop instead. Usage: <Tooltip><Button>Reference</Button></Tooltip>
classNamestringTooltip additional class
distancenumberDistance of the tooltip to its target, defaults to 15
enableFlipbooleanIf true, tries to keep the tooltip in view by flipping it if necessary
entryDelaynumberDelay in ms before the tooltip appears
exitDelaynumberDelay in ms before the tooltip disappears, Avoid passing in a value of "0", as users should be given ample time to move their mouse from the trigger to the tooltip content without the content being hidden.
flipBehavior| 'flip' | ( | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' )[]The desired position to flip the tooltip to if the initial position is not possible. By setting this prop to 'flip' it attempts to flip the tooltip to the opposite side if there is no space. You can also pass an array of positions that determines the flip order. It should contain the initial position followed by alternative positions if that position is unavailable. Example: Initial position is 'top'. Button with tooltip is in the top right corner. 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no space to the right, so it finally shows the tooltip on the left.
idstringid of the tooltip
isContentLeftAlignedbooleanFlag to indicate that the text content is left aligned
isVisiblebooleanvalue for visibility when trigger is 'manual'
maxWidthstringMaximum width of the tooltip (default 18.75rem)
minWidthstring | 'trigger'Minimum width of the tooltip. If set to "trigger", the minimum width will be set to the reference element width.
onTooltipHidden() => voidCallback when tooltip's hide transition has finished executing
position| TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'Tooltip position. Note: With 'enableFlip' set to true, it will change the position if there is not enough space for the starting position. The behavior of where it flips to can be controlled through the flipBehavior prop. The 'auto' position chooses the side with the most space. The 'auto' position requires the 'enableFlip' prop to be true.
triggerstringTooltip trigger: click, mouseenter, focus, manual Set to manual to trigger tooltip programmatically (through the isVisible prop)
triggerRefHTMLElement | (() => HTMLElement) | React.RefObject<any>The trigger reference element to which the Tooltip is relatively placed to. If you can wrap the element with the Tooltip, you can use the children prop instead, or both props together. When passed along with the trigger prop, the div element that wraps the trigger will be removed. Usage: <Tooltip triggerRef={() => document.getElementById('reference-element')} />
Unknown'off' | 'polite'Determines whether the tooltip is an aria-live region. If the triggerRef prop is passed in the default behavior is 'polite' in order to ensure the tooltip contents is announced to assistive technologies. Otherwise the default behavior is 'off'.
zIndexnumberz-index of the tooltip

CSS variables

SelectorVariableValue
.pf-v5-c-menu--pf-v5-global--Color--100
#151515
.pf-v5-c-menu--pf-v5-global--Color--200
#6a6e73
.pf-v5-c-menu--pf-v5-global--BorderColor--100
#d2d2d2
.pf-v5-c-menu--pf-v5-global--primary-color--100
#06c
.pf-v5-c-menu--pf-v5-global--link--Color
#06c
.pf-v5-c-menu--pf-v5-global--link--Color--hover
#004080
.pf-v5-c-menu--pf-v5-global--BackgroundColor--100
#fff
.pf-v5-c-menu--pf-v5-global--icon--Color--light
#6a6e73
.pf-v5-c-menu--pf-v5-global--icon--Color--dark
#151515
.pf-v5-c-menu--pf-v5-c-menu--BackgroundColor
#fff
.pf-v5-c-menu--pf-v5-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-v5-c-menu--pf-v5-c-menu--MinWidth
auto
.pf-v5-c-menu--pf-v5-c-menu--Width
auto
.pf-v5-c-menu--pf-v5-c-menu--ZIndex
200
.pf-v5-c-menu--pf-v5-c-menu--Top
auto
.pf-v5-c-menu--pf-v5-c-menu--m-flyout__menu--Top
calc(0.5rem * -1 + 0px)
.pf-v5-c-menu--pf-v5-c-menu--m-flyout__menu--Right
auto
.pf-v5-c-menu--pf-v5-c-menu--m-flyout__menu--Bottom
auto
.pf-v5-c-menu--pf-v5-c-menu--m-flyout__menu--Left
calc(100% + 0px)
.pf-v5-c-menu--pf-v5-c-menu--m-flyout__menu--m-top--Bottom
calc(0.5rem * -1)
.pf-v5-c-menu--pf-v5-c-menu--m-flyout__menu--m-left--Right
calc(100% + 0px)
.pf-v5-c-menu--pf-v5-c-menu--m-plain--BoxShadow
none
.pf-v5-c-menu--pf-v5-c-menu--m-flyout__menu--top-offset
0px
.pf-v5-c-menu--pf-v5-c-menu--m-flyout__menu--left-offset
0px
.pf-v5-c-menu--pf-v5-c-menu--m-flyout__menu--m-left--right-offset
0px
.pf-v5-c-menu--pf-v5-c-menu__content--Height
auto
.pf-v5-c-menu--pf-v5-c-menu__content--MaxHeight
none
.pf-v5-c-menu--pf-v5-c-menu--m-scrollable__content--MaxHeight
18.75rem
.pf-v5-c-menu--pf-v5-c-menu--c-divider--MarginTop
0
.pf-v5-c-menu--pf-v5-c-menu--c-divider--MarginBottom
0
.pf-v5-c-menu--pf-v5-c-menu__list--c-divider--MarginTop
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__list--c-divider--MarginBottom
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__header--PaddingTop
1rem
.pf-v5-c-menu--pf-v5-c-menu__header--PaddingRight
1rem
.pf-v5-c-menu--pf-v5-c-menu__header--PaddingBottom
1rem
.pf-v5-c-menu--pf-v5-c-menu__header--PaddingLeft
1rem
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--MarginTop
calc(1rem * -1 / 2)
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--MarginRight
calc(1rem * -1 / 2)
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--MarginBottom
calc(1rem * -1 / 2)
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--MarginLeft
calc(1rem * -1 / 2)
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--PaddingTop
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--PaddingRight
1rem
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--PaddingBottom
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--PaddingLeft
1rem
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--BackgroundColor
transparent
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--hover--BackgroundColor
#f0f0f0
.pf-v5-c-menu--pf-v5-c-menu__header--c-menu__item--focus--BackgroundColor
#f0f0f0
.pf-v5-c-menu--pf-v5-c-menu__search--PaddingTop
1rem
.pf-v5-c-menu--pf-v5-c-menu__search--PaddingRight
1rem
.pf-v5-c-menu--pf-v5-c-menu__search--PaddingBottom
1rem
.pf-v5-c-menu--pf-v5-c-menu__search--PaddingLeft
1rem
.pf-v5-c-menu--pf-v5-c-menu__header__search--PaddingTop
0
.pf-v5-c-menu--pf-v5-c-menu__list--Display
block
.pf-v5-c-menu--pf-v5-c-menu__list--PaddingTop
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__list--PaddingBottom
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__list-item--Display
flex
.pf-v5-c-menu--pf-v5-c-menu__list-item--Color
#151515
.pf-v5-c-menu--pf-v5-c-menu__list-item--BackgroundColor
transparent
.pf-v5-c-menu--pf-v5-c-menu__list-item--hover--BackgroundColor
#f0f0f0
.pf-v5-c-menu--pf-v5-c-menu__list-item--focus-within--BackgroundColor
#f0f0f0
.pf-v5-c-menu--pf-v5-c-menu__list-item--m-loading--PaddingTop
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item--PaddingTop
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item--PaddingRight
1rem
.pf-v5-c-menu--pf-v5-c-menu__item--PaddingBottom
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item--PaddingLeft
1rem
.pf-v5-c-menu--pf-v5-c-menu__item--OutlineOffset
calc(0.125rem * -1)
.pf-v5-c-menu--pf-v5-c-menu__item--FontSize
1rem
.pf-v5-c-menu--pf-v5-c-menu__item--FontWeight
400
.pf-v5-c-menu--pf-v5-c-menu__item--LineHeight
1.5
.pf-v5-c-menu--pf-v5-c-menu__list-item--m-disabled__item--Color
#6a6e73
.pf-v5-c-menu--pf-v5-c-menu__list-item--m-danger__item--Color
#c9190b
.pf-v5-c-menu--pf-v5-c-menu__list-item--m-load__item--Color
#06c
.pf-v5-c-menu--pf-v5-c-menu__group--Display
block
.pf-v5-c-menu--pf-v5-c-menu__group-title--PaddingTop
1rem
.pf-v5-c-menu--pf-v5-c-menu__group-title--PaddingRight
1rem
.pf-v5-c-menu--pf-v5-c-menu__group-title--PaddingLeft
1rem
.pf-v5-c-menu--pf-v5-c-menu__group-title--FontSize
0.75rem
.pf-v5-c-menu--pf-v5-c-menu__group-title--FontWeight
400
.pf-v5-c-menu--pf-v5-c-menu__group-title--Color
#6a6e73
.pf-v5-c-menu--pf-v5-c-menu__item-description--FontSize
0.75rem
.pf-v5-c-menu--pf-v5-c-menu__item-description--Color
#6a6e73
.pf-v5-c-menu--pf-v5-c-menu__item-icon--MarginRight
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item-check--MarginRight
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item-toggle-icon--PaddingRight
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item-toggle-icon--PaddingLeft
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color
#d2d2d2
.pf-v5-c-menu--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item-toggle-icon--item-text--MarginLeft
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item-select-icon--MarginLeft
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item-select-icon--Color
#06c
.pf-v5-c-menu--pf-v5-c-menu__item-select-icon--FontSize
0.75rem
.pf-v5-c-menu--pf-v5-c-menu__item-external-icon--MarginLeft
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item-external-icon--Color
#06c
.pf-v5-c-menu--pf-v5-c-menu__item-external-icon--FontSize
0.75rem
.pf-v5-c-menu--pf-v5-c-menu__item-external-icon--Opacity
0
.pf-v5-c-menu--pf-v5-c-menu__item-action--PaddingTop
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item-action--PaddingRight
1rem
.pf-v5-c-menu--pf-v5-c-menu__item-action--PaddingBottom
0.5rem
.pf-v5-c-menu--pf-v5-c-menu__item-action--PaddingLeft
1rem
.pf-v5-c-menu--pf-v5-c-menu__item-action--Color
#6a6e73
.pf-v5-c-menu--pf-v5-c-menu__item-action--BackgroundColor
transparent
.pf-v5-c-menu--pf-v5-c-menu__item-action--hover--Color
#151515
.pf-v5-c-menu--pf-v5-c-menu__item-action--disabled--Color
#d2d2d2
.pf-v5-c-menu--pf-v5-c-menu__item-action--m-favorited--Color
#f0ab00
.pf-v5-c-menu--pf-v5-c-menu__item-action--m-favorited--hover--Color
#c58c00
.pf-v5-c-menu--pf-v5-c-menu__item-action-icon--Height
calc(1rem * 1.5)
.pf-v5-c-menu--pf-v5-c-menu__item-action--m-favorite__icon--FontSize
0.75rem
.pf-v5-c-menu--pf-v5-c-menu__breadcrumb--PaddingTop
1rem
.pf-v5-c-menu--pf-v5-c-menu__breadcrumb--PaddingRight
1rem
.pf-v5-c-menu--pf-v5-c-menu__breadcrumb--PaddingBottom
1rem
.pf-v5-c-menu--pf-v5-c-menu__breadcrumb--PaddingLeft
1rem
.pf-v5-c-menu--pf-v5-c-menu__breadcrumb--c-breadcrumb__item--FontSize
1rem
.pf-v5-c-menu--pf-v5-c-menu__breadcrumb--c-breadcrumb__heading--FontSize
1rem
.pf-v5-c-menu--pf-v5-c-menu--m-drilldown--c-menu--Top
0
.pf-v5-c-menu--pf-v5-c-menu--m-drilldown--c-menu--TransitionDuration--transform
250ms
.pf-v5-c-menu--pf-v5-c-menu--m-drilldown--c-menu--Transition
transform 250ms
.pf-v5-c-menu--pf-v5-c-menu--m-drilldown__content--TransitionDuration--height
250ms
.pf-v5-c-menu--pf-v5-c-menu--m-drilldown__content--TransitionDuration--transform
250ms
.pf-v5-c-menu--pf-v5-c-menu--m-drilldown__content--Transition
transform 250ms, height 250ms
.pf-v5-c-menu--pf-v5-c-menu--m-drilldown__list--TransitionDuration--transform
250ms
.pf-v5-c-menu--pf-v5-c-menu--m-drilldown__list--Transition
transform 250ms
.pf-v5-c-menu--pf-v5-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex
100
.pf-v5-c-menu--pf-v5-c-menu__footer--PaddingTop
1rem
.pf-v5-c-menu--pf-v5-c-menu__footer--PaddingRight
1rem
.pf-v5-c-menu--pf-v5-c-menu__footer--PaddingBottom
1rem
.pf-v5-c-menu--pf-v5-c-menu__footer--PaddingLeft
1rem
.pf-v5-c-menu--pf-v5-c-menu__footer--BoxShadow
none
.pf-v5-c-menu--pf-v5-c-menu__footer--after--BorderTopWidth
1px
.pf-v5-c-menu--pf-v5-c-menu__footer--after--BorderTopColor
#d2d2d2
.pf-v5-c-menu--pf-v5-c-menu--m-scrollable__footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-v5-c-menu--pf-v5-c-menu--m-scrollable__footer--after--BorderTopWidth
0
.pf-v5-c-menu--pf-v5-c-menu--m-scrollable__footer--after--BorderBottomWidth
1px
.pf-v5-c-menu--pf-v5-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-v5-c-menu--pf-v5-c-menu--m-nav--BackgroundColor
#212427
.pf-v5-c-menu--pf-v5-c-menu--m-nav__list--PaddingTop
0
.pf-v5-c-menu--pf-v5-c-menu--m-nav__list--PaddingBottom
0
.pf-v5-c-menu--pf-v5-c-menu--m-nav__list-item--hover--BackgroundColor
#3c3f42
.pf-v5-c-menu--pf-v5-c-menu--m-nav__list-item--focus-within--BackgroundColor
#3c3f42
.pf-v5-c-menu--pf-v5-c-menu--m-nav__list-item--active--BackgroundColor
#3c3f42
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item--PaddingRight
1.5rem
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item--PaddingLeft
1.5rem
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item--Color
#fff
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item--FontSize
0.875rem
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item--OutlineOffset
calc(0.25rem * -1)
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item--before--BorderBottomColor
#3c3f42
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item--before--BorderBottomWidth
1px
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftColor
#8a8d90
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftWidth
1px
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item--hover--after--Top
calc(1px * -1)
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top
0
.pf-v5-c-menu--pf-v5-c-menu--m-nav__item-description--Color
#f0f0f0
.pf-v5-c-menu--pf-v5-c-menu--m-nav--c-menu--left-offset
0.25rem
.pf-v5-c-menu--pf-v5-c-menu--m-nav--c-menu--m-top--bottom-offset
0
.pf-v5-c-menu--pf-v5-c-menu--m-nav--c-menu--m-left--right-offset
0.25rem
.pf-v5-c-menu--pf-v5-c-menu--m-nav--c-menu--Top
calc(1px * -1)
.pf-v5-c-menu--pf-v5-c-menu--m-nav--c-menu--Left
calc(100% - 0.25rem)
.pf-v5-c-menu--pf-v5-c-menu--m-nav--c-menu--m-left--Right
calc(100% - 0.25rem)
.pf-v5-c-menu--pf-v5-c-menu--m-nav--c-menu--m-top--Bottom
calc(0 + 0)
.pf-v5-c-menu--pf-v5-c-menu--m-nav__list-item--first-child--c-menu--Top
0
.pf-v5-c-menu__group--pf-v5-hidden-visible--hidden--Display
none
.pf-v5-c-menu__group--pf-v5-hidden-visible--Display
block
.pf-v5-c-menu__group--pf-v5-hidden-visible--visible--Display
block
.pf-m-hidden.pf-v5-c-menu__group--pf-v5-hidden-visible--Display
none
.pf-v5-c-menu.pf-m-top--pf-v5-c-menu--m-flyout__menu--Top
auto
.pf-v5-c-menu.pf-m-top--pf-v5-c-menu--m-flyout__menu--Bottom
calc(0.5rem * -1)
.pf-v5-c-menu.pf-m-left--pf-v5-c-menu--m-flyout__menu--Right
calc(100% + 0px)
.pf-v5-c-menu.pf-m-left--pf-v5-c-menu--m-flyout__menu--Left
auto
.pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu--pf-v5-c-menu--BoxShadow
none
.pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list .pf-v5-c-menu__list--pf-v5-c-menu__list--PaddingTop
0
.pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list .pf-v5-c-menu__list--pf-v5-c-menu__list--PaddingBottom
0
.pf-v5-c-menu.pf-m-plain--pf-v5-c-menu--BoxShadow
none
.pf-v5-c-menu.pf-m-scrollable--pf-v5-c-menu__content--MaxHeight
18.75rem
.pf-v5-c-menu.pf-m-scrollable--pf-v5-c-menu__footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-v5-c-menu.pf-m-scrollable--pf-v5-c-menu__footer--after--BorderTopWidth
0
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu--BackgroundColor
#212427
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__list--PaddingTop
0
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__list--PaddingBottom
0
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__list-item--active--BackgroundColor
#3c3f42
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__item--Color
#fff
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__item--FontSize
0.875rem
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__item--OutlineOffset
calc(0.25rem * -1)
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__item--PaddingRight
1.5rem
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__item--PaddingLeft
1.5rem
.pf-v5-c-menu.pf-m-nav--pf-v5-c-menu__item-description--Color
#f0f0f0
.pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-top--pf-v5-c-menu--m-nav--c-menu--Top
auto
.pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-left--pf-v5-c-menu--m-nav--c-menu--Left
auto
.pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu__list-item:first-child--pf-v5-c-menu--m-nav__item--hover--after--Top
0
.pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu__list-item:first-child .pf-v5-c-menu--pf-v5-c-menu--m-nav--c-menu--Top
0
.pf-v5-c-menu__breadcrumb .pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__item--FontSize
1rem
.pf-v5-c-menu__breadcrumb .pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__heading--FontSize
1rem
.pf-v5-c-menu__content .pf-v5-c-menu__content--pf-v5-c-menu__content--Height
auto
.pf-v5-c-menu__header--pf-v5-c-menu__item--PaddingTop
0.5rem
.pf-v5-c-menu__header--pf-v5-c-menu__item--PaddingRight
1rem
.pf-v5-c-menu__header--pf-v5-c-menu__item--PaddingBottom
0.5rem
.pf-v5-c-menu__header--pf-v5-c-menu__item--PaddingLeft
1rem
.pf-v5-c-menu__header > .pf-v5-c-menu__item--pf-v5-c-menu__item--BackgroundColor
transparent
.pf-v5-c-menu__header > .pf-v5-c-menu__item:hover--pf-v5-c-menu__item--BackgroundColor
#f0f0f0
.pf-v5-c-menu__header > .pf-v5-c-menu__item:focus--pf-v5-c-menu__item--BackgroundColor
#f0f0f0
.pf-v5-c-menu__header + .pf-v5-c-menu__search--pf-v5-c-menu__search--PaddingTop
0
.pf-v5-c-menu__list--pf-v5-hidden-visible--visible--Display
block
.pf-v5-c-menu__list-item--pf-v5-hidden-visible--visible--Display
flex
.pf-v5-c-menu__list-item:hover--pf-v5-c-menu__list-item--BackgroundColor
#f0f0f0
.pf-v5-c-menu__list-item:hover--pf-v5-c-menu__list-item--Color
#fff, inherit
.pf-v5-c-menu__list-item:focus-within--pf-v5-c-menu__list-item--BackgroundColor
#f0f0f0
.pf-v5-c-menu__list-item:focus-within--pf-v5-c-menu__list-item--Color
#fff, inherit
.pf-v5-c-menu__list-item.pf-m-disabled--pf-v5-c-menu__list-item--hover--BackgroundColor
transparent
.pf-v5-c-menu__list-item.pf-m-disabled--pf-v5-c-menu__item--Color
#6a6e73
.pf-v5-c-menu__list-item.pf-m-disabled--pf-v5-c-menu__item-toggle-icon
#d2d2d2
.pf-v5-c-menu__list-item.pf-m-disabled--pf-v5-c-menu__list-item--focus-within--BackgroundColor
transparent
.pf-v5-c-menu__list-item.pf-m-load--pf-v5-c-menu__list-item--hover--BackgroundColor
transparent
.pf-v5-c-menu__list-item.pf-m-load--pf-v5-c-menu__list-item--focus-within--BackgroundColor
transparent
.pf-v5-c-menu__list-item.pf-m-load--pf-v5-c-menu__item--Color
#06c
.pf-v5-c-menu__list-item.pf-m-loading--pf-v5-c-menu__list-item--hover--BackgroundColor
transparent
.pf-v5-c-menu__list-item.pf-m-loading--pf-v5-c-menu__list-item--focus-within--BackgroundColor
transparent
.pf-v5-c-menu__list-item.pf-m-danger--pf-v5-c-menu__item--Color
#c9190b, inherit
.pf-v5-c-menu__item:hover--pf-v5-c-menu__item-external-icon--Opacity
1
.pf-v5-c-menu__item-check .pf-v5-c-check--pf-v5-c-check__input--TranslateY
none
.pf-v5-c-menu__item-action.pf-m-favorited--pf-v5-c-menu__item-action--Color
#f0ab00
.pf-v5-c-menu__item-action.pf-m-favorited--pf-v5-c-menu__item-action--hover--Color
#c58c00
.pf-v5-c-menu__item-action:hover--pf-v5-c-menu__item-action--Color
#151515
.pf-v5-c-menu__item-action:disabled--pf-v5-c-menu__item-action--Color
#d2d2d2

View source on GitHub