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
Name	Type	Description
togglerequired	DropdownToggleProps \| ((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.
children	React.ReactNode	Anything which can be rendered in a dropdown.
className	string	Classes applied to root element of dropdown.
focusTimeoutDelay	number	Time in ms to wait before firing the toggles' focus event. Defaults to 0
isOpen	boolean	Flag to indicate if menu is opened.
isPlain	boolean	Indicates if the menu should be without the outer box-shadow.
isScrollable	boolean	Indicates if the menu should be scrollable.
maxMenuHeight	string	Maximum height of dropdown menu
menuHeight	string	Height of the dropdown menu
onOpenChange	(isOpen: boolean) => void	Callback 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.
onOpenChangeKeys	string[]	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) => void	Function callback called when user selects item.
onToggleKeydown	(event: KeyboardEvent) => void	Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key.
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.
popperProps	DropdownPopperProps	Additional properties to pass to the Popper
shouldFocusFirstItemOnOpen Beta	boolean	Flag indicating the first menu item should be focused after opening the dropdown.
shouldFocusToggleOnSelect	boolean	Flag 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.
shouldPreventScrollOnItemFocus	boolean	Flag indicating if scroll on focus of the first menu item should occur.
zIndex	number	z-index of the dropdown menu

DropdownGroup

See the MenuGroup section of the Menu documentation for additional props that may be passed.
*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Anything which can be rendered in a dropdown group.
className	string		Classes applied to root element of dropdown group
label	string		Label of the dropdown group
labelHeadingLevel	No type info	'h1'

DropdownItem

See the MenuItem section of the Menu documentation for additional props that may be passed.
*required
Name	Type	Description
children	React.ReactNode	Anything which can be rendered in a dropdown item
className	string	Classes applied to root element of dropdown item
description	React.ReactNode	Description of the dropdown item
isAriaDisabled	boolean	Render item as aria-disabled option
isDisabled	boolean	Render item as disabled option
onClick	(event?: any) => void	Callback for item click
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.
tooltipProps	TooltipProps	Props for adding a tooltip to a menu item
value	any	Identifies the component in the dropdown onSelect callback

DropdownList

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Anything which can be rendered in a dropdown list
className	string		Classes applied to root element of dropdown list

MenuToggle

*required
Name	Type	Description
badge	BadgeProps \| React.ReactNode	Optional badge rendered inside the toggle, after the children content
children	React.ReactNode	Content rendered inside the toggle
className	string	Additional classes added to the toggle
icon	React.ReactNode	Optional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component.
isDisabled	boolean	Flag indicating the toggle is disabled
isExpanded	boolean	Flag indicating the toggle has expanded styling
isFullHeight	boolean	Flag indicating the toggle is full height
isFullWidth	boolean	Flag indicating the toggle takes up the full width of its parent
isPlaceholder	boolean	Flag indicating the toggle contains placeholder text
ouiaId	number \| string	Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button.
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.
size	'default' \| 'sm'	Adds styling which affects the size of the menu toggle
splitButtonItems	React.ReactNode[]	Elements to display before the toggle button. When included, renders the menu toggle as a split button.
status	'success' \| 'warning' \| 'danger'	Status styles of the menu toggle
statusIcon	React.ReactNode	Overrides the status icon
variant	'default' \| 'plain' \| 'primary' \| 'plainText' \| 'secondary' \| 'typeahead'	Variant styles of the menu toggle

DropdownToggleProps

*required
Name	Type	Default	Description
toggleNoderequired	React.ReactNode		Dropdown toggle node.
toggleRef	React.RefObject<HTMLButtonElement>		Reference to the toggle.

DropdownPopperProps

*required
Name	Type	Description
appendTo	HTMLElement \| (() => HTMLElement) \| 'inline'	The container to append the popper to. Defaults to document.body.
direction	'up' \| 'down'	Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips.
enableFlip	boolean	Enable to flip the popper when it reaches the boundary
maxWidth	string \| 'trigger'	Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width
minWidth	string \| '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
preventOverflow	boolean	Flag to prevent the popper from overflowing its container and becoming partially obscured.
width	string \| 'trigger'	Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width

TooltipProps

*required
Name	Type	Description
contentrequired	React.ReactNode	Tooltip content
animationDuration	number	CSS fade transition animation duration
appendTo	HTMLElement \| ((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'.
children	ReactElement<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>
className	string	Tooltip additional class
distance	number	Distance of the tooltip to its target, defaults to 15
enableFlip	boolean	If true, tries to keep the tooltip in view by flipping it if necessary
entryDelay	number	Delay in ms before the tooltip appears
exitDelay	number	Delay 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.
id	string	id of the tooltip
isContentLeftAligned	boolean	Flag to indicate that the text content is left aligned
isVisible	boolean	value for visibility when trigger is 'manual'
maxWidth	string	Maximum width of the tooltip (default 18.75rem)
minWidth	string \| 'trigger'	Minimum width of the tooltip. If set to "trigger", the minimum width will be set to the reference element width.
onTooltipHidden	() => void	Callback 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.
trigger	string	Tooltip trigger: click, mouseenter, focus, manual Set to manual to trigger tooltip programmatically (through the isVisible prop)
triggerRef	HTMLElement \| (() => 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'.
zIndex	number	z-index of the tooltip

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-menu	--pf-v6-c-menu--RowGap	0.5rem
--pf-v6-c-menu--RowGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu--Width	auto
	.pf-v6-c-menu	--pf-v6-c-menu--MinWidth	auto
	.pf-v6-c-menu	--pf-v6-c-menu--PaddingBlockStart	0.5rem
--pf-v6-c-menu--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu--PaddingBlockEnd	0.5rem
--pf-v6-c-menu--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-menu--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-menu	--pf-v6-c-menu--BoxShadow	0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
--pf-v6-c-menu--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--default --pf-t--global--box-shadow--color--md--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
	.pf-v6-c-menu	--pf-v6-c-menu--Color	(In light theme) #151515
--pf-v6-c-menu--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-menu	--pf-v6-c-menu--BorderRadius	6px
--pf-v6-c-menu--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-menu	--pf-v6-c-menu--OutlineOffset	calc(1px * -3)
--pf-v6-c-menu--OutlineOffset calc(--pf-t--global--border--width--control--default * -3) calc(--pf-t--global--border--width--100 * -3) calc(1px * -3)
	.pf-v6-c-menu	--pf-v6-c-menu--ZIndex	200
--pf-v6-c-menu--ZIndex --pf-t--global--z-index--sm --pf-t--global--z-index--200 200
	.pf-v6-c-menu	--pf-v6-c-menu--button--disabled--Color	(In light theme) #a3a3a3
--pf-v6-c-menu--button--disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-menu	--pf-v6-c-menu--icon--disabled--Color	(In light theme) #a3a3a3
--pf-v6-c-menu--icon--disabled--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-menu	--pf-v6-c-menu--TransitionDuration	200ms
--pf-v6-c-menu--TransitionDuration --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-menu	--pf-v6-c-menu--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-menu--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-menu	--pf-v6-c-menu--m-plain--BoxShadow	none
	.pf-v6-c-menu	--pf-v6-c-menu__content--RowGap	0.5rem
--pf-v6-c-menu__content--RowGap --pf-v6-c-menu--RowGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__content--Height	auto
	.pf-v6-c-menu	--pf-v6-c-menu__content--MaxHeight	none
	.pf-v6-c-menu	--pf-v6-c-menu--m-scrollable__content--MaxHeight	18.75rem
	.pf-v6-c-menu	--pf-v6-c-menu__search--PaddingBlockStart	0.5rem
--pf-v6-c-menu__search--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__search--PaddingBlockEnd	0.5rem
--pf-v6-c-menu__search--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__search--PaddingInlineStart	1rem
--pf-v6-c-menu__search--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-menu	--pf-v6-c-menu__search--PaddingInlineEnd	1rem
--pf-v6-c-menu__search--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-menu	--pf-v6-c-menu__footer--BoxShadow	none
	.pf-v6-c-menu	--pf-v6-c-menu--m-scrollable__footer--BoxShadow	0px -10px 9px -8px rgba(41, 41, 41, 0.1500)
--pf-v6-c-menu--m-scrollable__footer--BoxShadow --pf-t--global--box-shadow--md--top --pf-t--global--box-shadow--X--md--top --pf-t--global--box-shadow--Y--md--top --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--directional --pf-t--global--box-shadow--color--md--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--100 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--300 --pf-t--global--box-shadow--color--100 0px -10px 9px -8px rgba(41, 41, 41, 0.1500)
	.pf-v6-c-menu	--pf-v6-c-menu__list-item--Color	(In light theme) #151515
--pf-v6-c-menu__list-item--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-menu	--pf-v6-c-menu__list-item--BackgroundColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-menu__list-item--BackgroundColor --pf-t--global--background--color--action--plain--default rgba(255, 255, 255, 0.0000)
	.pf-v6-c-menu	--pf-v6-c-menu__list-item--TransitionDuration	100ms
--pf-v6-c-menu__list-item--TransitionDuration --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-menu	--pf-v6-c-menu__list-item--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-menu__list-item--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-menu	--pf-v6-c-menu__list-item--TransitionProperty	background-color
	.pf-v6-c-menu	--pf-v6-c-menu__list-item--hover--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-menu__list-item--hover--BackgroundColor --pf-t--global--background--color--action--plain--hover --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500)
	.pf-v6-c-menu	--pf-v6-c-menu__list-item--m-danger--Color	(In light theme) #b1380b
--pf-v6-c-menu__list-item--m-danger--Color --pf-t--global--text--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-menu	--pf-v6-c-menu__list-item--m-load__item--Color	(In light theme) #0066cc
--pf-v6-c-menu__list-item--m-load__item--Color --pf-t--global--text--color--link--default --pf-t--global--text--color--link--100 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-menu	--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd	1.5rem
--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__list--divider--MarginBlockStart	0.5rem
--pf-v6-c-menu__list--divider--MarginBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__list--divider--MarginBlockEnd	0.5rem
--pf-v6-c-menu__list--divider--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__item--PaddingBlockStart	0.5rem
--pf-v6-c-menu__item--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__item--PaddingBlockEnd	0.5rem
--pf-v6-c-menu__item--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__item--PaddingInlineStart	1.5rem
--pf-v6-c-menu__item--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__item--PaddingInlineEnd	1.5rem
--pf-v6-c-menu__item--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__item--FontSize	0.875rem
--pf-v6-c-menu__item--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-menu	--pf-v6-c-menu__item--LineHeight	1.5
--pf-v6-c-menu__item--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-menu	--pf-v6-c-menu__item--FontWeight	400
--pf-v6-c-menu__item--FontWeight --pf-t--global--font--weight--body--default --pf-t--global--font--weight--100 400
	.pf-v6-c-menu	--pf-v6-c-menu__item--Color	(In light theme) #151515
--pf-v6-c-menu__item--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-menu	--pf-v6-c-menu__item--BackgroundColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-menu__item--BackgroundColor --pf-t--global--background--color--action--plain--default rgba(255, 255, 255, 0.0000)
	.pf-v6-c-menu	--pf-v6-c-menu__item--m-disabled--Color	(In light theme) #a3a3a3
--pf-v6-c-menu__item--m-disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-menu	--pf-v6-c-menu__header--PaddingBlockStart	0.5rem
--pf-v6-c-menu__header--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__header--PaddingBlockEnd	0.5rem
--pf-v6-c-menu__header--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__header--PaddingInlineStart	1.5rem
--pf-v6-c-menu__header--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__header--PaddingInlineEnd	1.5rem
--pf-v6-c-menu__header--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__group-title--PaddingBlockStart	0.5rem
--pf-v6-c-menu__group-title--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__group-title--PaddingBlockEnd	0.5rem
--pf-v6-c-menu__group-title--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__group-title--PaddingInlineStart	1.5rem
--pf-v6-c-menu__group-title--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__group-title--PaddingInlineEnd	1.5rem
--pf-v6-c-menu__group-title--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__breadcrumb--PaddingBlockStart	0
	.pf-v6-c-menu	--pf-v6-c-menu__breadcrumb--PaddingBlockEnd	0
	.pf-v6-c-menu	--pf-v6-c-menu__breadcrumb--PaddingInlineStart	1.5rem
--pf-v6-c-menu__breadcrumb--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__breadcrumb--PaddingInlineEnd	1.5rem
--pf-v6-c-menu__breadcrumb--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__footer--PaddingBlockStart	0.5rem
--pf-v6-c-menu__footer--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__footer--PaddingBlockEnd	0.5rem
--pf-v6-c-menu__footer--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__footer--PaddingInlineStart	1.5rem
--pf-v6-c-menu__footer--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__footer--PaddingInlineEnd	1.5rem
--pf-v6-c-menu__footer--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__item-main--ColumnGap	0.5rem
--pf-v6-c-menu__item-main--ColumnGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-menu	--pf-v6-c-menu__group-title--Color	(In light theme) #4d4d4d
--pf-v6-c-menu__group-title--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-menu	--pf-v6-c-menu__item-description--FontSize	0.75rem
--pf-v6-c-menu__item-description--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-menu	--pf-v6-c-menu__item-description--Color	(In light theme) #4d4d4d
--pf-v6-c-menu__item-description--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-menu	--pf-v6-c-menu__item-action--FontSize	0.875rem
--pf-v6-c-menu__item-action--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-menu	--pf-v6-c-menu__item-action--icon--size	0.875rem, 0.875rem
--pf-v6-c-menu__item-action--icon--size var(--pf-v6-c-menu__item-action--FontSize, --pf-t--global--icon--size--md) --pf-t--global--font--size--body--default, --pf-t--global--icon--size--md --pf-t--global--font--size--sm, --pf-t--global--icon--size--200 --pf-t--global--font--size--200, 0.875rem 0.875rem, 0.875rem
	.pf-v6-c-menu	--pf-v6-c-menu__item-action--Color	(In light theme) #707070
--pf-v6-c-menu__item-action--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-menu	--pf-v6-c-menu__item-action--m-favorited--Color	(In light theme) #dca614
--pf-v6-c-menu__item-action--m-favorited--Color --pf-t--global--icon--color--favorite--clicked --pf-t--global--color--favorite--clicked --pf-t--global--color--favorite--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-menu	--pf-v6-c-menu__item-action--button--MinWidth	calc(0.875rem, 0.875rem) + 0.5rem * 2
--pf-v6-c-menu__item-action--button--MinWidth calc(--pf-v6-c-menu__item-action--icon--size + --pf-t--global--spacer--sm * 2) calc(var(--pf-v6-c-menu__item-action--FontSize, --pf-t--global--icon--size--md) + --pf-t--global--spacer--200 * 2) calc(--pf-t--global--font--size--body--default, --pf-t--global--icon--size--md) + --pf-t--global--spacer--200 * 2 calc(--pf-t--global--font--size--sm, --pf-t--global--icon--size--200) + 0.5rem * 2 calc(--pf-t--global--font--size--200, 0.875rem) + 0.5rem * 2 calc(0.875rem, 0.875rem) + 0.5rem * 2
	.pf-v6-c-menu	--pf-v6-c-menu__item-select-icon--Color	(In light theme) #707070
--pf-v6-c-menu__item-select-icon--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-menu	--pf-v6-c-menu__item--m-selected__item-select-icon--Color	(In light theme) #0066cc
--pf-v6-c-menu__item--m-selected__item-select-icon--Color --pf-t--global--icon--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-menu	--pf-v6-c-menu__item-external--Color	(In light theme) #0066cc
--pf-v6-c-menu__item-external--Color --pf-t--global--icon--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-menu	--pf-v6-c-menu--m-flyout__menu--top-offset	0px
	.pf-v6-c-menu	--pf-v6-c-menu--m-flyout__menu--left-offset	0px
	.pf-v6-c-menu	--pf-v6-c-menu--m-flyout__menu--m-left--right-offset	0px
	.pf-v6-c-menu	--pf-v6-c-menu--m-flyout__Zindex	200
--pf-v6-c-menu--m-flyout__Zindex --pf-t--global--z-index--sm --pf-t--global--z-index--200 200
	.pf-v6-c-menu	--pf-v6-c-menu--m-flyout__menu--InsetBlockStart	calc(0 * -1 + 0px)
--pf-v6-c-menu--m-flyout__menu--InsetBlockStart calc(--pf-v6-c-menu__list--PaddingBlockStart * -1 + --pf-v6-c-menu--m-flyout__menu--top-offset) calc(0 * -1 + 0px)
	.pf-v6-c-menu	--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd	auto
	.pf-v6-c-menu	--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd	auto
	.pf-v6-c-menu	--pf-v6-c-menu--m-flyout__menu--InsetInlineStart	calc(100% + 0px)
--pf-v6-c-menu--m-flyout__menu--InsetInlineStart calc(100% + --pf-v6-c-menu--m-flyout__menu--left-offset) calc(100% + 0px)
	.pf-v6-c-menu	--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd	calc(0 * -1)
--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd calc(--pf-v6-c-menu__list--PaddingBlockStart * -1) calc(0 * -1)
	.pf-v6-c-menu	--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd	calc(100% + 0px)
--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd calc(100% + --pf-v6-c-menu--m-flyout__menu--m-left--right-offset) calc(100% + 0px)
	.pf-v6-c-menu	--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height	400ms
--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height --pf-t--global--motion--duration--slide-in--default --pf-t--global--motion--duration--xl --pf-t--global--duration--400 400ms
	.pf-v6-c-menu	--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform	400ms
--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform --pf-t--global--motion--duration--slide-in--default --pf-t--global--motion--duration--xl --pf-t--global--duration--400 400ms
	.pf-v6-c-menu	--pf-v6-c-menu--m-drilldown__content--Transition	transform 400ms, height 400ms
--pf-v6-c-menu--m-drilldown__content--Transition transform --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform, height --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height transform --pf-t--global--motion--duration--slide-in--default, height --pf-t--global--motion--duration--slide-in--default transform --pf-t--global--motion--duration--xl, height --pf-t--global--motion--duration--xl transform --pf-t--global--duration--400, height --pf-t--global--duration--400 transform 400ms, height 400ms
	.pf-v6-c-menu	--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart	0
	.pf-v6-c-menu	--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform	400ms
--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform --pf-t--global--motion--duration--slide-in--default --pf-t--global--motion--duration--xl --pf-t--global--duration--400 400ms
	.pf-v6-c-menu	--pf-v6-c-menu--m-drilldown--c-menu--Transition	transform 400ms
--pf-v6-c-menu--m-drilldown--c-menu--Transition transform --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform transform --pf-t--global--motion--duration--slide-in--default transform --pf-t--global--motion--duration--xl transform --pf-t--global--duration--400 transform 400ms
	.pf-v6-c-menu	--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform	400ms
--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform --pf-t--global--motion--duration--slide-in--default --pf-t--global--motion--duration--xl --pf-t--global--duration--400 400ms
	.pf-v6-c-menu	--pf-v6-c-menu--m-drilldown__list--Transition	transform 400ms
--pf-v6-c-menu--m-drilldown__list--Transition transform --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform transform --pf-t--global--motion--duration--slide-in--default transform --pf-t--global--motion--duration--xl transform --pf-t--global--duration--400 transform 400ms
	.pf-v6-c-menu	--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex	100
--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 100
	.pf-v6-c-menu__list	--pf-v6-hidden-visible--visible--Display	grid
	.pf-v6-c-menu__list	--pf-v6-hidden-visible--hidden--Display	none
	.pf-v6-c-menu__list	--pf-v6-hidden-visible--Display	flex
--pf-v6-hidden-visible--Display --pf-v6-hidden-visible--visible--Display --pf-v6-c-data-list__item-action--Display flex
	.pf-v6-c-menu__list.pf-m-hidden	--pf-v6-hidden-visible--Display	none
--pf-v6-hidden-visible--Display --pf-v6-hidden-visible--hidden--Display none
	.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])	--pf-v6-c-menu__item--Color	(In light theme) #a3a3a3
--pf-v6-c-menu__item--Color --pf-v6-c-menu__item--m-disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])	--pf-v6-c-menu__item-toggle-icon--Color	(In light theme) #a3a3a3
--pf-v6-c-menu__item-toggle-icon--Color --pf-v6-c-menu--icon--disabled--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])	--pf-v6-c-menu__item-external-icon--Color	(In light theme) #a3a3a3
--pf-v6-c-menu__item-external-icon--Color --pf-v6-c-menu--icon--disabled--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])	--pf-v6-c-menu__item-description--Color	(In light theme) #a3a3a3
--pf-v6-c-menu__item-description--Color --pf-v6-c-menu--icon--disabled--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true])	--pf-v6-c-menu__list-item--BackgroundColor	transparent
	.pf-v6-c-menu.pf-m-top	--pf-v6-c-menu--m-flyout__menu--InsetBlockStart	auto
	.pf-v6-c-menu.pf-m-top	--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd	calc(0 * -1)
--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd calc(--pf-v6-c-menu__list--PaddingBlockStart * -1) calc(0 * -1)
	.pf-v6-c-menu.pf-m-left	--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd	calc(100% + 0px)
--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd calc(100% + --pf-v6-c-menu--m-flyout__menu--m-left--right-offset) calc(100% + 0px)
	.pf-v6-c-menu.pf-m-left	--pf-v6-c-menu--m-flyout__menu--InsetInlineStart	auto
	.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list	--pf-v6-c-menu__list--PaddingBlockStart	0
	.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list	--pf-v6-c-menu__list--PaddingBlockEnd	0
	.pf-v6-c-menu.pf-m-plain	--pf-v6-c-menu--BoxShadow	none
--pf-v6-c-menu--BoxShadow --pf-v6-c-menu--m-plain--BoxShadow none
	.pf-v6-c-menu.pf-m-scrollable	--pf-v6-c-menu__content--MaxHeight	18.75rem
--pf-v6-c-menu__content--MaxHeight --pf-v6-c-menu--m-scrollable__content--MaxHeight 18.75rem
	.pf-v6-c-menu.pf-m-scrollable	--pf-v6-c-menu__footer--BoxShadow	0px -10px 9px -8px rgba(41, 41, 41, 0.1500)
--pf-v6-c-menu__footer--BoxShadow --pf-v6-c-menu--m-scrollable__footer--BoxShadow --pf-t--global--box-shadow--md--top --pf-t--global--box-shadow--X--md--top --pf-t--global--box-shadow--Y--md--top --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--directional --pf-t--global--box-shadow--color--md--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--100 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--300 --pf-t--global--box-shadow--color--100 0px -10px 9px -8px rgba(41, 41, 41, 0.1500)
	.pf-v6-c-menu.pf-m-scrollable	--pf-v6-c-menu__footer--PaddingBlockStart	calc(0.5rem + 0.5rem)
--pf-v6-c-menu__footer--PaddingBlockStart calc(--pf-v6-c-menu__item--PaddingBlockStart + --pf-v6-c-menu--RowGap) calc(--pf-t--global--spacer--sm + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--200 + --pf-t--global--spacer--200) calc(0.5rem + 0.5rem)
	.pf-v6-c-menu.pf-m-scrollable	--pf-v6-c-menu__footer--PaddingBlockEnd	calc(0.5rem + 0.5rem)
--pf-v6-c-menu__footer--PaddingBlockEnd calc(--pf-v6-c-menu__item--PaddingBlockStart + --pf-v6-c-menu--RowGap) calc(--pf-t--global--spacer--sm + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--200 + --pf-t--global--spacer--200) calc(0.5rem + 0.5rem)
	.pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer)	--pf-v6-c-menu--PaddingBlockEnd	0
	.pf-v6-c-menu__content .pf-v6-c-menu__content	--pf-v6-c-menu__content--Height	auto
	.pf-v6-c-menu__list-item.pf-m-load	--pf-v6-c-menu__item--Color	(In light theme) #0066cc
--pf-v6-c-menu__item--Color --pf-v6-c-menu__list-item--m-load__item--Color --pf-t--global--text--color--link--default --pf-t--global--text--color--link--100 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-menu__list-item.pf-m-danger	--pf-v6-c-menu__item--Color	(In light theme) #b1380b
--pf-v6-c-menu__item--Color --pf-v6-c-menu__list-item--m-danger--Color --pf-t--global--text--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus)	--pf-v6-c-menu__item--Color	undefined, #b1380b
--pf-v6-c-menu__item--Color var(--pf-v6-c-menu__list-item--m-danger--hover--Color, --pf-v6-c-menu__list-item--m-danger--Color) undefined, --pf-v6-c-menu__list-item--m-danger--Color undefined, --pf-t--global--text--color--status--danger--default undefined, --pf-t--global--color--status--danger--default undefined, --pf-t--global--color--status--danger--100 undefined, --pf-t--color--red-orange--60 undefined, #b1380b
	.pf-v6-c-menu__list-item.pf-m-focus	--pf-v6-c-menu__list-item--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-menu__list-item--BackgroundColor --pf-v6-c-menu__list-item--hover--BackgroundColor --pf-t--global--background--color--action--plain--hover --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500)
	.pf-v6-c-menu__item	--pf-v6-hidden-visible--visible--Display	flex
	.pf-v6-c-menu__item	--pf-v6-hidden-visible--hidden--Display	none
	.pf-v6-c-menu__item	--pf-v6-hidden-visible--Display	flex
--pf-v6-hidden-visible--Display --pf-v6-hidden-visible--visible--Display --pf-v6-c-data-list__item-action--Display flex
	.pf-v6-c-menu__item.pf-m-hidden	--pf-v6-hidden-visible--Display	none
--pf-v6-hidden-visible--Display --pf-v6-hidden-visible--hidden--Display none
	.pf-v6-c-menu__item.pf-m-selected	--pf-v6-c-menu__item-select-icon--Color	(In light theme) #0066cc
--pf-v6-c-menu__item-select-icon--Color --pf-v6-c-menu__item--m-selected__item-select-icon--Color --pf-t--global--icon--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-menu__item-check .pf-v6-c-check	--pf-v6-c-check__input--TranslateY	none
	.pf-v6-c-menu__item-toggle-icon.pf-m-favorited	--pf-v6-c-button--Color	(In light theme) #dca614
--pf-v6-c-button--Color --pf-v6-c-menu__item-action--m-favorited--Color --pf-t--global--icon--color--favorite--clicked --pf-t--global--color--favorite--clicked --pf-t--global--color--favorite--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-menu__item-toggle-icon.pf-m-favorited	--pf-v6-c-menu__item-action--Color	(In light theme) #dca614
--pf-v6-c-menu__item-action--Color --pf-v6-c-menu__item-action--m-favorited--Color --pf-t--global--icon--color--favorite--clicked --pf-t--global--color--favorite--clicked --pf-t--global--color--favorite--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-menu__breadcrumb	--pf-v6-c-breadcrumb__item--FontSize	undefined
--pf-v6-c-breadcrumb__item--FontSize --pf-v6-c-menu__breadcrumb--FontSize undefined
	.pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle	--pf-v6-c-menu-toggle--BorderWidth	0
	.pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle	--pf-v6-c-menu-toggle--BorderColor	transparent

View source on GitHub