Select

A select list enables users to select one or more items from a list. Use a select list when options are dynamic or variable.

A newer React implementation of the select will replace the existing implementation at the next major release. The documentation for the newer implementation is under the React next tab, and this newer implementation can be imported from @patternfly/react-core/next.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Single

Grouped single

Checkbox

Typeahead

Multiple Typeahead

Props

Select

*required
Name	Type	Description
togglerequired	(toggleRef: React.RefObject<any>) => React.ReactNode	Renderer for a custom select toggle. Forwards a ref to the toggle.
children	React.ReactNode	Anything which can be rendered in a select
className	string	Classes applied to root element of select
isOpen	boolean	Flag to indicate if select is open
isPlain	boolean	Indicates if the select should be without the outer box-shadow
minWidth	string	Minimum width of the select menu
onOpenChange	(isOpen: boolean) => void	Callback to allow the select component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing either tab or escape.
onSelect	(event?: React.MouseEvent<Element, MouseEvent>, itemId?: string \| number) => void	Function callback when user selects an option.
roleBeta	string	Determines the accessible role of the select. For a checkbox select pass in "menu".
selected	any \| any[]	Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the SelectOption.
zIndex	number	z-index of the select menu

SelectGroup

*required
Name	Type	Description
childrenrequired	React.ReactNode	Anything which can be rendered in a select group
className	string	Classes applied to root element of select group
label	string	Label of the select group

SelectOption

*required
Name	Type	Description
children	React.ReactNode	Anything which can be rendered in a select option
className	string	Classes applied to root element of select option
hasCheck	boolean	Indicates the option has a checkbox
isDisabled	boolean	Indicates the option is disabled
isFocused	boolean	Indicates the option is focused
isSelected	boolean	Indicates the option is selected
itemId	any	Identifies the component in the Select onSelect callback

SelectList

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Anything which can be rendered in a select list
className	string		Classes applied to root element of select list
isAriaMultiselectableBeta	boolean	false	Indicates to assistive technologies whether more than one item can be selected for a non-checkbox select.

CSS variables


	.pf-c-menu	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-menu	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-menu	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-menu	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-menu	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-menu	--pf-c-menu--BackgroundColor	#fff
--pf-c-menu--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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--BoxShadow --pf-global--BoxShadow--md $pf-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 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--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 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--m-flyout__menu--Top calc(--pf-c-menu__list--PaddingTop * -1 + --pf-c-menu--m-flyout__menu--top-offset) calc(--pf-global--spacer--sm * -1 + 0px) calc($pf-global--spacer--sm * -1 + 0px) calc(pf-size-prem(8px) * -1 + 0px) 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--m-flyout__menu--Left calc(100% + --pf-c-menu--m-flyout__menu--left-offset) calc(100% + 0px)
	.pf-c-menu	--pf-c-menu--m-flyout__menu--m-top--Bottom	calc(0.5rem * -1)
--pf-c-menu--m-flyout__menu--m-top--Bottom calc(--pf-c-menu__list--PaddingTop * -1) calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-menu	--pf-c-menu--m-flyout__menu--m-left--Right	calc(100% + 0px)
--pf-c-menu--m-flyout__menu--m-left--Right calc(100% + --pf-c-menu--m-flyout__menu--m-left--right-offset) 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__list--c-divider--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__list--c-divider--MarginBottom	0.5rem
--pf-c-menu__list--c-divider--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__header--PaddingTop	1rem
--pf-c-menu__header--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__header--PaddingRight	1rem
--pf-c-menu__header--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__header--PaddingBottom	1rem
--pf-c-menu__header--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__header--PaddingLeft	1rem
--pf-c-menu__header--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__header--c-menu__item--MarginTop	calc(1rem * -1 / 2)
--pf-c-menu__header--c-menu__item--MarginTop calc(--pf-c-menu__header--PaddingTop * -1 / 2) calc(--pf-global--spacer--md * -1 / 2) calc($pf-global--spacer--md * -1 / 2) calc(pf-size-prem(16px) * -1 / 2) calc(1rem * -1 / 2)
	.pf-c-menu	--pf-c-menu__header--c-menu__item--MarginRight	calc(1rem * -1 / 2)
--pf-c-menu__header--c-menu__item--MarginRight calc(--pf-c-menu__header--PaddingRight * -1 / 2) calc(--pf-global--spacer--md * -1 / 2) calc($pf-global--spacer--md * -1 / 2) calc(pf-size-prem(16px) * -1 / 2) calc(1rem * -1 / 2)
	.pf-c-menu	--pf-c-menu__header--c-menu__item--MarginBottom	calc(1rem * -1 / 2)
--pf-c-menu__header--c-menu__item--MarginBottom calc(--pf-c-menu__header--PaddingBottom * -1 / 2) calc(--pf-global--spacer--md * -1 / 2) calc($pf-global--spacer--md * -1 / 2) calc(pf-size-prem(16px) * -1 / 2) calc(1rem * -1 / 2)
	.pf-c-menu	--pf-c-menu__header--c-menu__item--MarginLeft	calc(1rem * -1 / 2)
--pf-c-menu__header--c-menu__item--MarginLeft calc(--pf-c-menu__header--PaddingLeft * -1 / 2) calc(--pf-global--spacer--md * -1 / 2) calc($pf-global--spacer--md * -1 / 2) calc(pf-size-prem(16px) * -1 / 2) calc(1rem * -1 / 2)
	.pf-c-menu	--pf-c-menu__header--c-menu__item--PaddingTop	0.5rem
--pf-c-menu__header--c-menu__item--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__header--c-menu__item--PaddingRight	1rem
--pf-c-menu__header--c-menu__item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__header--c-menu__item--PaddingBottom	0.5rem
--pf-c-menu__header--c-menu__item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__header--c-menu__item--PaddingLeft	1rem
--pf-c-menu__header--c-menu__item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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__header--c-menu__item--hover--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-menu	--pf-c-menu__header--c-menu__item--focus--BackgroundColor	#f0f0f0
--pf-c-menu__header--c-menu__item--focus--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-menu	--pf-c-menu__search--PaddingTop	1rem
--pf-c-menu__search--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__search--PaddingRight	1rem
--pf-c-menu__search--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__search--PaddingBottom	1rem
--pf-c-menu__search--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__search--PaddingLeft	1rem
--pf-c-menu__search--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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__list--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__list--PaddingBottom	0.5rem
--pf-c-menu__list--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 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__list-item--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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__list-item--hover--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-menu	--pf-c-menu__list-item--focus-within--BackgroundColor	#f0f0f0
--pf-c-menu__list-item--focus-within--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-menu	--pf-c-menu__list-item--m-loading--PaddingTop	0.5rem
--pf-c-menu__list-item--m-loading--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item--PaddingTop	0.5rem
--pf-c-menu__item--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item--PaddingRight	1rem
--pf-c-menu__item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__item--PaddingBottom	0.5rem
--pf-c-menu__item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item--PaddingLeft	1rem
--pf-c-menu__item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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__item--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__item--FontWeight	400
--pf-c-menu__item--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-menu	--pf-c-menu__item--LineHeight	1.5
--pf-c-menu__item--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-menu	--pf-c-menu__list-item--m-disabled__item--Color	#6a6e73
--pf-c-menu__list-item--m-disabled__item--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-menu	--pf-c-menu__list-item--m-danger__item--Color	#c9190b
--pf-c-menu__list-item--m-danger__item--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-menu	--pf-c-menu__list-item--m-load__item--Color	#06c
--pf-c-menu__list-item--m-load__item--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu	--pf-c-menu__group--Display	block
	.pf-c-menu	--pf-c-menu__group-title--PaddingTop	1rem
--pf-c-menu__group-title--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__group-title--PaddingRight	1rem
--pf-c-menu__group-title--PaddingRight --pf-c-menu__item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__group-title--PaddingLeft	1rem
--pf-c-menu__group-title--PaddingLeft --pf-c-menu__item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__group-title--FontSize	0.75rem
--pf-c-menu__group-title--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-menu	--pf-c-menu__group-title--FontWeight	400
--pf-c-menu__group-title--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-menu	--pf-c-menu__group-title--Color	#6a6e73
--pf-c-menu__group-title--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-menu	--pf-c-menu__item-description--FontSize	0.75rem
--pf-c-menu__item-description--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-menu	--pf-c-menu__item-description--Color	#6a6e73
--pf-c-menu__item-description--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-menu	--pf-c-menu__item-icon--MarginRight	0.5rem
--pf-c-menu__item-icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item-check--MarginRight	0.5rem
--pf-c-menu__item-check--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item-toggle-icon--PaddingRight	0.5rem
--pf-c-menu__item-toggle-icon--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item-toggle-icon--PaddingLeft	0.5rem
--pf-c-menu__item-toggle-icon--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color	#d2d2d2
--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-menu	--pf-c-menu__item-text--item-toggle-icon--MarginLeft	0.5rem
--pf-c-menu__item-text--item-toggle-icon--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item-toggle-icon--item-text--MarginLeft	0.5rem
--pf-c-menu__item-toggle-icon--item-text--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item-select-icon--MarginLeft	0.5rem
--pf-c-menu__item-select-icon--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item-select-icon--Color	#06c
--pf-c-menu__item-select-icon--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu	--pf-c-menu__item-select-icon--FontSize	0.625rem
--pf-c-menu__item-select-icon--FontSize --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 0.625rem
	.pf-c-menu	--pf-c-menu__item-external-icon--MarginLeft	0.5rem
--pf-c-menu__item-external-icon--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item-external-icon--Color	#06c
--pf-c-menu__item-external-icon--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu	--pf-c-menu__item-external-icon--FontSize	0.625rem
--pf-c-menu__item-external-icon--FontSize --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 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__item-action--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item-action--PaddingRight	1rem
--pf-c-menu__item-action--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__item-action--PaddingBottom	0.5rem
--pf-c-menu__item-action--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu	--pf-c-menu__item-action--PaddingLeft	1rem
--pf-c-menu__item-action--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__item-action--Color	#6a6e73
--pf-c-menu__item-action--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-menu	--pf-c-menu__item-action--hover--Color	#151515
--pf-c-menu__item-action--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu	--pf-c-menu__item-action--disabled--Color	#d2d2d2
--pf-c-menu__item-action--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-menu	--pf-c-menu__item-action--m-favorited--Color	#f0ab00
--pf-c-menu__item-action--m-favorited--Color --pf-global--palette--gold-400 $pf-color-gold-400 #f0ab00
	.pf-c-menu	--pf-c-menu__item-action--m-favorited--hover--Color	#c58c00
--pf-c-menu__item-action--m-favorited--hover--Color --pf-global--palette--gold-500 $pf-color-gold-500 #c58c00
	.pf-c-menu	--pf-c-menu__item-action-icon--Height	calc(1rem * 1.5)
--pf-c-menu__item-action-icon--Height calc(--pf-c-menu__item--FontSize * --pf-c-menu__item--LineHeight) calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) calc($pf-global--FontSize--md * $pf-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5)
	.pf-c-menu	--pf-c-menu__item-action--m-favorite__icon--FontSize	0.625rem
--pf-c-menu__item-action--m-favorite__icon--FontSize --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 0.625rem
	.pf-c-menu	--pf-c-menu__breadcrumb--PaddingTop	1rem
--pf-c-menu__breadcrumb--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__breadcrumb--PaddingRight	1rem
--pf-c-menu__breadcrumb--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__breadcrumb--PaddingBottom	1rem
--pf-c-menu__breadcrumb--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__breadcrumb--PaddingLeft	1rem
--pf-c-menu__breadcrumb--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize	1rem
--pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize	1rem
--pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 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--m-drilldown--c-menu--TransitionDuration--transform --pf-global--TransitionDuration $pf-global--TransitionDuration 250ms
	.pf-c-menu	--pf-c-menu--m-drilldown--c-menu--Transition	transform 250ms
--pf-c-menu--m-drilldown--c-menu--Transition transform --pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform transform --pf-global--TransitionDuration transform $pf-global--TransitionDuration transform 250ms
	.pf-c-menu	--pf-c-menu--m-drilldown__content--TransitionDuration--height	250ms
--pf-c-menu--m-drilldown__content--TransitionDuration--height --pf-global--TransitionDuration $pf-global--TransitionDuration 250ms
	.pf-c-menu	--pf-c-menu--m-drilldown__content--TransitionDuration--transform	250ms
--pf-c-menu--m-drilldown__content--TransitionDuration--transform --pf-global--TransitionDuration $pf-global--TransitionDuration 250ms
	.pf-c-menu	--pf-c-menu--m-drilldown__content--Transition	transform 250ms, height 250ms
--pf-c-menu--m-drilldown__content--Transition transform --pf-c-menu--m-drilldown__content--TransitionDuration--transform, height --pf-c-menu--m-drilldown__content--TransitionDuration--height transform --pf-global--TransitionDuration, height --pf-global--TransitionDuration transform $pf-global--TransitionDuration, height $pf-global--TransitionDuration transform 250ms, height 250ms
	.pf-c-menu	--pf-c-menu--m-drilldown__list--TransitionDuration--transform	250ms
--pf-c-menu--m-drilldown__list--TransitionDuration--transform --pf-global--TransitionDuration $pf-global--TransitionDuration 250ms
	.pf-c-menu	--pf-c-menu--m-drilldown__list--Transition	transform 250ms
--pf-c-menu--m-drilldown__list--Transition transform --pf-c-menu--m-drilldown__list--TransitionDuration--transform transform --pf-global--TransitionDuration transform $pf-global--TransitionDuration 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--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-menu	--pf-c-menu__footer--PaddingTop	1rem
--pf-c-menu__footer--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__footer--PaddingRight	1rem
--pf-c-menu__footer--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__footer--PaddingBottom	1rem
--pf-c-menu__footer--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__footer--PaddingLeft	1rem
--pf-c-menu__footer--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu	--pf-c-menu__footer--BoxShadow	none
	.pf-c-menu	--pf-c-menu__footer--after--BorderTopWidth	1px
--pf-c-menu__footer--after--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu	--pf-c-menu__footer--after--BorderTopColor	#d2d2d2
--pf-c-menu__footer--after--BorderTopColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #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--m-scrollable__footer--BoxShadow --pf-global--BoxShadow--sm-top $pf-global--BoxShadow--sm-top 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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--m-scrollable__footer--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 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--m-nav--BoxShadow --pf-global--BoxShadow--lg $pf-global--BoxShadow--lg 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08) 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08) 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--m-nav--BackgroundColor --pf-global--BackgroundColor--dark-300 $pf-global--BackgroundColor--dark-300 $pf-color-black-850 #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--m-nav__list-item--hover--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-menu	--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor	#3c3f42
--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-menu	--pf-c-menu--m-nav__list-item--active--BackgroundColor	#3c3f42
--pf-c-menu--m-nav__list-item--active--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-menu	--pf-c-menu--m-nav__item--PaddingRight	1.5rem
--pf-c-menu--m-nav__item--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-menu	--pf-c-menu--m-nav__item--PaddingLeft	1.5rem
--pf-c-menu--m-nav__item--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-menu	--pf-c-menu--m-nav__item--Color	#fff
--pf-c-menu--m-nav__item--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-menu	--pf-c-menu--m-nav__item--FontSize	0.875rem
--pf-c-menu--m-nav__item--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-menu	--pf-c-menu--m-nav__item--OutlineOffset	calc(0.25rem * -1)
--pf-c-menu--m-nav__item--OutlineOffset calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-menu	--pf-c-menu--m-nav__item--before--BorderBottomColor	#3c3f42
--pf-c-menu--m-nav__item--before--BorderBottomColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-menu	--pf-c-menu--m-nav__item--before--BorderBottomWidth	1px
--pf-c-menu--m-nav__item--before--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu	--pf-c-menu--m-nav__item--hover--after--BorderLeftColor	#8a8d90
--pf-c-menu--m-nav__item--hover--after--BorderLeftColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-menu	--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth	1px
--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu	--pf-c-menu--m-nav__item--hover--after--Top	calc(1px * -1)
--pf-c-menu--m-nav__item--hover--after--Top calc(--pf-c-menu--m-nav__item--before--BorderBottomWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-menu	--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top	0
	.pf-c-menu	--pf-c-menu--m-nav__item-description--Color	#f0f0f0
--pf-c-menu--m-nav__item-description--Color --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-menu	--pf-c-menu--m-nav--c-menu--left-offset	0.25rem
	.pf-c-menu	--pf-c-menu--m-nav--c-menu--m-top--bottom-offset	0
	.pf-c-menu	--pf-c-menu--m-nav--c-menu--m-left--right-offset	0.25rem
	.pf-c-menu	--pf-c-menu--m-nav--c-menu--Top	calc(1px * -1)
--pf-c-menu--m-nav--c-menu--Top calc(--pf-c-menu--m-nav__item--before--BorderBottomWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-menu	--pf-c-menu--m-nav--c-menu--Left	calc(100% - 0.25rem)
--pf-c-menu--m-nav--c-menu--Left calc(100% - --pf-c-menu--m-nav--c-menu--left-offset) calc(100% - 0.25rem)
	.pf-c-menu	--pf-c-menu--m-nav--c-menu--m-left--Right	calc(100% - 0.25rem)
--pf-c-menu--m-nav--c-menu--m-left--Right calc(100% - --pf-c-menu--m-nav--c-menu--m-left--right-offset) calc(100% - 0.25rem)
	.pf-c-menu	--pf-c-menu--m-nav--c-menu--m-top--Bottom	calc(0 + 0)
--pf-c-menu--m-nav--c-menu--m-top--Bottom calc(0 + --pf-c-menu--m-nav--c-menu--m-top--bottom-offset) calc(0 + 0)
	.pf-c-menu	--pf-c-menu--m-nav__list-item--first-child--c-menu--Top	0
	.pf-c-menu__group	--pf-hidden-visible--visible--Visibility	visible
	.pf-c-menu__group	--pf-hidden-visible--hidden--Display	none
	.pf-c-menu__group	--pf-hidden-visible--hidden--Visibility	hidden
	.pf-c-menu__group	--pf-hidden-visible--Display	block
--pf-hidden-visible--Display --pf-hidden-visible--visible--Display --pf-c-menu__group--Display block
	.pf-c-menu__group	--pf-hidden-visible--Visibility	visible
--pf-hidden-visible--Visibility --pf-hidden-visible--visible--Visibility visible
	.pf-c-menu__group	--pf-hidden-visible--visible--Display	block
--pf-hidden-visible--visible--Display --pf-c-menu__group--Display block
	.pf-m-hidden.pf-c-menu__group	--pf-hidden-visible--Display	none
--pf-hidden-visible--Display --pf-hidden-visible--hidden--Display none
	.pf-m-hidden.pf-c-menu__group	--pf-hidden-visible--Visibility	hidden
--pf-hidden-visible--Visibility --pf-hidden-visible--hidden--Visibility hidden
	.pf-c-menu.pf-m-top	--pf-c-menu--m-flyout__menu--Top	auto
	.pf-c-menu.pf-m-top	--pf-c-menu--m-flyout__menu--Bottom	calc(0.5rem * -1)
--pf-c-menu--m-flyout__menu--Bottom --pf-c-menu--m-flyout__menu--m-top--Bottom calc(--pf-c-menu__list--PaddingTop * -1) calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-menu.pf-m-left	--pf-c-menu--m-flyout__menu--Right	calc(100% + 0px)
--pf-c-menu--m-flyout__menu--Right --pf-c-menu--m-flyout__menu--m-left--Right calc(100% + --pf-c-menu--m-flyout__menu--m-left--right-offset) calc(100% + 0px)
	.pf-c-menu.pf-m-left	--pf-c-menu--m-flyout__menu--Left	auto
	.pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu	--pf-c-menu--BoxShadow	none
	.pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list	--pf-c-menu__list--PaddingTop	0
	.pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list	--pf-c-menu__list--PaddingBottom	0
	.pf-c-menu.pf-m-plain	--pf-c-menu--BoxShadow	none
--pf-c-menu--BoxShadow --pf-c-menu--m-plain--BoxShadow none
	.pf-c-menu.pf-m-scrollable	--pf-c-menu__content--MaxHeight	18.75rem
--pf-c-menu__content--MaxHeight --pf-c-menu--m-scrollable__content--MaxHeight 18.75rem
	.pf-c-menu.pf-m-scrollable	--pf-c-menu__footer--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-menu__footer--BoxShadow --pf-c-menu--m-scrollable__footer--BoxShadow --pf-global--BoxShadow--sm-top $pf-global--BoxShadow--sm-top 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-menu.pf-m-scrollable	--pf-c-menu__footer--after--BorderTopWidth	0
--pf-c-menu__footer--after--BorderTopWidth --pf-c-menu--m-scrollable__footer--after--BorderTopWidth 0
	.pf-c-menu.pf-m-nav	--pf-c-menu--BackgroundColor	#212427
--pf-c-menu--BackgroundColor --pf-c-menu--m-nav--BackgroundColor --pf-global--BackgroundColor--dark-300 $pf-global--BackgroundColor--dark-300 $pf-color-black-850 #212427
	.pf-c-menu.pf-m-nav	--pf-c-menu__list--PaddingTop	0
--pf-c-menu__list--PaddingTop --pf-c-menu--m-nav__list--PaddingTop 0
	.pf-c-menu.pf-m-nav	--pf-c-menu__list--PaddingBottom	0
--pf-c-menu__list--PaddingBottom --pf-c-menu--m-nav__list--PaddingBottom 0
	.pf-c-menu.pf-m-nav	--pf-c-menu__list-item--hover--BackgroundColor	#3c3f42
--pf-c-menu__list-item--hover--BackgroundColor --pf-c-menu--m-nav__list-item--hover--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-menu.pf-m-nav	--pf-c-menu__list-item--focus-within--BackgroundColor	#3c3f42
--pf-c-menu__list-item--focus-within--BackgroundColor --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-menu.pf-m-nav	--pf-c-menu__list-item--active--BackgroundColor	#3c3f42
--pf-c-menu__list-item--active--BackgroundColor --pf-c-menu--m-nav__list-item--active--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-menu.pf-m-nav	--pf-c-menu__item--Color	#fff
--pf-c-menu__item--Color --pf-c-menu--m-nav__item--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-menu.pf-m-nav	--pf-c-menu__item--FontSize	0.875rem
--pf-c-menu__item--FontSize --pf-c-menu--m-nav__item--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-menu.pf-m-nav	--pf-c-menu__item--OutlineOffset	calc(0.25rem * -1)
--pf-c-menu__item--OutlineOffset --pf-c-menu--m-nav__item--OutlineOffset calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-menu.pf-m-nav	--pf-c-menu__item--PaddingRight	1.5rem
--pf-c-menu__item--PaddingRight --pf-c-menu--m-nav__item--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-menu.pf-m-nav	--pf-c-menu__item--PaddingLeft	1.5rem
--pf-c-menu__item--PaddingLeft --pf-c-menu--m-nav__item--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-menu.pf-m-nav	--pf-c-menu__item-description--Color	#f0f0f0
--pf-c-menu__item-description--Color --pf-c-menu--m-nav__item-description--Color --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top	--pf-c-menu--m-nav--c-menu--Top	auto
	.pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left	--pf-c-menu--m-nav--c-menu--Left	auto
	.pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child	--pf-c-menu--m-nav__item--hover--after--Top	0
--pf-c-menu--m-nav__item--hover--after--Top --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top 0
	.pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu	--pf-c-menu--m-nav--c-menu--Top	0
--pf-c-menu--m-nav--c-menu--Top --pf-c-menu--m-nav__list-item--first-child--c-menu--Top 0
	.pf-c-menu__breadcrumb .pf-c-breadcrumb	--pf-c-breadcrumb__item--FontSize	1rem
--pf-c-breadcrumb__item--FontSize --pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-menu__breadcrumb .pf-c-breadcrumb	--pf-c-breadcrumb__heading--FontSize	1rem
--pf-c-breadcrumb__heading--FontSize --pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-menu__content .pf-c-menu__content	--pf-c-menu__content--Height	auto
	.pf-c-menu__header	--pf-c-menu__item--PaddingTop	0.5rem
--pf-c-menu__item--PaddingTop --pf-c-menu__header--c-menu__item--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu__header	--pf-c-menu__item--PaddingRight	1rem
--pf-c-menu__item--PaddingRight --pf-c-menu__header--c-menu__item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu__header	--pf-c-menu__item--PaddingBottom	0.5rem
--pf-c-menu__item--PaddingBottom --pf-c-menu__header--c-menu__item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu__header	--pf-c-menu__item--PaddingLeft	1rem
--pf-c-menu__item--PaddingLeft --pf-c-menu__header--c-menu__item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu__header > .pf-c-menu__item	--pf-c-menu__item--BackgroundColor	transparent
--pf-c-menu__item--BackgroundColor --pf-c-menu__header--c-menu__item--BackgroundColor transparent
	.pf-c-menu__header > .pf-c-menu__item:hover	--pf-c-menu__item--BackgroundColor	#f0f0f0
--pf-c-menu__item--BackgroundColor --pf-c-menu__header--c-menu__item--hover--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-menu__header > .pf-c-menu__item:focus	--pf-c-menu__item--BackgroundColor	#f0f0f0
--pf-c-menu__item--BackgroundColor --pf-c-menu__header--c-menu__item--focus--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-menu__header + .pf-c-menu__search	--pf-c-menu__search--PaddingTop	0
--pf-c-menu__search--PaddingTop --pf-c-menu__header__search--PaddingTop 0
	.pf-c-menu__list	--pf-hidden-visible--visible--Display	block
--pf-hidden-visible--visible--Display --pf-c-menu__list--Display block
	.pf-c-menu__list-item	--pf-hidden-visible--visible--Display	flex
--pf-hidden-visible--visible--Display --pf-c-menu__list-item--Display flex
	.pf-c-menu__list-item:hover	--pf-c-menu__list-item--BackgroundColor	#f0f0f0
--pf-c-menu__list-item--BackgroundColor --pf-c-menu__list-item--hover--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-menu__list-item:hover	--pf-c-menu__list-item--Color	#fff, inherit
--pf-c-menu__list-item--Color var(--pf-c-menu__list-item--hover--Color, inherit) --pf-c-nav--c-menu__list-item--hover--Color, inherit --pf-global--Color--light-100, inherit $pf-global--Color--light-100, inherit $pf-color-white, inherit #fff, inherit
	.pf-c-menu__list-item:focus-within	--pf-c-menu__list-item--BackgroundColor	#f0f0f0
--pf-c-menu__list-item--BackgroundColor --pf-c-menu__list-item--focus-within--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-menu__list-item:focus-within	--pf-c-menu__list-item--Color	#fff, inherit
--pf-c-menu__list-item--Color var(--pf-c-menu__list-item--focus-within--Color, inherit) --pf-c-nav--c-menu__list-item--focus-within--Color, inherit --pf-global--Color--light-100, inherit $pf-global--Color--light-100, inherit $pf-color-white, inherit #fff, inherit
	.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__item--Color --pf-c-menu__list-item--m-disabled__item--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-menu__list-item.pf-m-disabled	--pf-c-menu__item-toggle-icon	#d2d2d2
--pf-c-menu__item-toggle-icon --pf-c-menu__list-item--m-disabled__item-toggle-icon--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-menu__list-item.pf-m-load	--pf-c-menu__list-item--hover--BackgroundColor	transparent
	.pf-c-menu__list-item.pf-m-load	--pf-c-menu__list-item--focus-within--BackgroundColor	transparent
	.pf-c-menu__list-item.pf-m-load	--pf-c-menu__item--Color	#06c
--pf-c-menu__item--Color --pf-c-menu__list-item--m-load__item--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu__list-item.pf-m-loading	--pf-c-menu__list-item--hover--BackgroundColor	transparent
	.pf-c-menu__list-item.pf-m-loading	--pf-c-menu__list-item--focus-within--BackgroundColor	transparent
	.pf-c-menu__list-item.pf-m-danger	--pf-c-menu__item--Color	#c9190b, inherit
--pf-c-menu__item--Color var(--pf-c-menu__list-item--m-danger__item--Color, inherit) --pf-global--danger-color--100, inherit $pf-global--danger-color--100, inherit $pf-color-red-100, inherit #c9190b, inherit
	.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--Color --pf-c-menu__item-action--m-favorited--Color --pf-global--palette--gold-400 $pf-color-gold-400 #f0ab00
	.pf-c-menu__item-action.pf-m-favorited	--pf-c-menu__item-action--hover--Color	#c58c00
--pf-c-menu__item-action--hover--Color --pf-c-menu__item-action--m-favorited--hover--Color --pf-global--palette--gold-500 $pf-color-gold-500 #c58c00
	.pf-c-menu__item-action:hover	--pf-c-menu__item-action--Color	#151515
--pf-c-menu__item-action--Color --pf-c-menu__item-action--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu__item-action:disabled	--pf-c-menu__item-action--Color	#d2d2d2
--pf-c-menu__item-action--Color --pf-c-menu__item-action--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines