A menu is a list of options or actions that users can choose from. It can be used in a variety of contexts whenever the user needs to choose between multiple values, options, or actions. A menu can be opened in a dropdown or select list, or it can be revealed by right clicking on a specific region within a page.

Examples

Basic

With icons

With checkbox Beta

Filtering with text input

With links

With separator(s)

With titled groups

With description

With actions

With favorites

Option single select

Option multi select

With drilldown Beta

With drilldown - initial drill in state Beta

To render an initially drilled in menu, the menuDrilledIn, drilldownPath, and activeMenu states must be set to an initial state. The menuHeights state must also be set, defining the height of the root menu. The setHeight function passed into the onGetMenuHeight property must also account for updating heights, other than the root menu, as menus drill in and out of view.

With drilldown - submenu functions Beta

With drilldown breadcrumbs Beta

Set max menu height

Scrollable

With view more

Props

*required
Name	Type	Description
activeItemIdBeta	string \| number	itemId of the currently active item. You can also specify isActive on the MenuItem.
activeMenuBeta	string	ID of the currently active menu for the drilldown variant
aria-label	string	Accessibility label
children	React.ReactNode	Anything that can be rendered inside of the Menu
className	string	Additional classes added to the Menu
containsDrilldownBeta	boolean	Indicates if menu contains a drilldown menu
containsFlyoutBeta	boolean	Indicates if menu contains a flyout menu
drilldownItemPathBeta	string[]	Indicates the path of drilled in menu itemIds
drilledInMenusBeta	string[]	Array of menus that are drilled in
hasSearchInput	boolean	Search input of menu
id	string	ID of the menu
isMenuDrilledInBeta	boolean	Indicates if a menu is drilled into
isNavFlyoutBeta	boolean	Indicating that the menu should have nav flyout styling
isPlain	boolean	Indicates if the menu should be without the outer box-shadow
isRootMenu	boolean	Internal flag indicating if the Menu is the root of a menu tree
isScrollable	boolean	Indicates if the menu should be srollable
onActionClick	(event?: any, itemId?: any, actionId?: any) => void	Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction.
onDrillInBeta	(fromItemId: string, toItemId: string, itemId: string) => void	Callback for drilling into a submenu
onDrillOutBeta	(toItemId: string, itemId: string) => void	Callback for drilling out of a submenu
onGetMenuHeightBeta	(menuId: string, height: number) => void	Callback for collecting menu heights
onSearchInputChange	( event: React.FormEvent<HTMLInputElement> \| React.SyntheticEvent<HTMLButtonElement>, value: string ) => void	A callback for when the input value changes.
onSelect	(event?: React.MouseEvent, itemId?: string \| number) => void	Callback for updating when item selection changes. You can also specify onClick on the MenuItem.
parentMenuBeta	string	ID of parent menu for drilldown menus
selected	any \| any[]	Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem.

MenuList

*required
Name	Type	Default	Description
children	React.ReactNode	null	Anything that can be rendered inside of menu list
className	string		Additional classes added to the menu list

MenuItem

*required
Name	Type	Description
actions	React.ReactNode	Render item with one or more actions
aria-label	string	Accessibility label
children	React.ReactNode	Content rendered inside the menu list item.
className	string	Additional classes added to the menu list item
component	React.ElementType<any> \| React.ComponentType<any>	Component used to render the menu item
description	React.ReactNode	Description of the menu item
directionBeta	'down' \| 'up'	Sub menu direction
drilldownMenuBeta	React.ReactNode \| (() => React.ReactNode)	Drilldown menu of the item. Should be a Menu or DrilldownMenu type.
flyoutMenuBeta	React.ReactElement	Flyout menu
hasCheckBeta	boolean	Flag indicating the item has a checkbox
icon	React.ReactNode	Render item with icon
isActive	boolean	Flag indicating whether the item is active
isDisabled	boolean	Render item as disabled option
isExternalLink	boolean	Render external link icon
isFavorited	boolean	Flag indicating if the item is favorited
isFocused	boolean	Flag indicating the item is focused
isLoadButton	boolean	Flag indicating if the item causes a load
isLoading	boolean	Flag indicating a loading state
isOnPathBeta	boolean	True if item is on current selection path
isSelected	boolean	Flag indicating if the option is selected
itemId	any	Identifies the component in the Menu onSelect or onActionClick callback
onClick	(event?: any) => void	Callback for item click
onShowFlyoutBeta	(event?: any) => void	Callback function when mouse leaves trigger
to	string	Target navigation link

MenuItemAction

*required
Name	Type	Description
actionId	any	Identifies the action item in the onActionClick on the Menu
aria-label	string	Accessibility label
className	string	Additional classes added to the action button
icon	'favorites' \| React.ReactNode	The action icon to use
innerRef	React.Ref<any>	Forwarded ref
isDisabled	boolean	Disables action, can also be specified on the MenuItem instead
isFavorited	boolean	Flag indicating if the item is favorited
onClick	(event?: any) => void	Callback on action click, can also specify onActionClick on the Menu instead

MenuContent

*required
Name	Type	Description
children	React.ReactNode	Items within group
getHeight	(height: string) => void	Callback to return the height of the menu content
innerRef	React.Ref<any>	Forwarded ref
maxMenuHeight	string	Maximum height of menu content
menuHeight	string	Height of the menu content

MenuInput

*required
Name	Type	Default	Description
children	React.ReactNode		Items within input
innerRef	React.Ref<any>		Forwarded ref

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-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__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

Menu