Menu toggle

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 go to our Beta components page on GitHub.

Examples

Collapsed

Expanded

Disabled

Count

Primary

Secondary

Plain

Plain with text

With icon/image and text

With avatar and text

Full height

Full width

Props

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 rendered inside the toggle, before the children content
innerRef	React.Ref<HTMLButtonElement>	Forwarded ref
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
variant	'default' \| 'plain' \| 'primary' \| 'plainText' \| 'secondary'	Variant styles of the menu toggle

CSS variables


	.pf-c-menu-toggle	--pf-c-menu-toggle--BorderRadius	0
	.pf-c-menu-toggle	--pf-c-menu-toggle--PaddingTop	0.375rem
--pf-c-menu-toggle--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--PaddingRight	0.5rem
--pf-c-menu-toggle--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--PaddingBottom	0.375rem
--pf-c-menu-toggle--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--PaddingLeft	0.5rem
--pf-c-menu-toggle--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--FontSize	1rem
--pf-c-menu-toggle--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--Color	#151515
--pf-c-menu-toggle--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle	--pf-c-menu-toggle--LineHeight	1.5
--pf-c-menu-toggle--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-menu-toggle	--pf-c-menu-toggle--BackgroundColor	transparent
	.pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderTopWidth	1px
--pf-c-menu-toggle--before--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderRightWidth	1px
--pf-c-menu-toggle--before--BorderRightWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderBottomWidth	0
	.pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderLeftWidth	1px
--pf-c-menu-toggle--before--BorderLeftWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderTopColor	#f0f0f0
--pf-c-menu-toggle--before--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderRightColor	#f0f0f0
--pf-c-menu-toggle--before--BorderRightColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderBottomColor	transparent
	.pf-c-menu-toggle	--pf-c-menu-toggle--before--BorderLeftColor	#f0f0f0
--pf-c-menu-toggle--before--BorderLeftColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-menu-toggle	--pf-c-menu-toggle--after--BorderBottomWidth	1px
--pf-c-menu-toggle--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle	--pf-c-menu-toggle--after--BorderBottomColor	#8a8d90
--pf-c-menu-toggle--after--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-menu-toggle	--pf-c-menu-toggle--hover--BackgroundColor	transparent
	.pf-c-menu-toggle	--pf-c-menu-toggle--hover--after--BorderBottomWidth	1px
--pf-c-menu-toggle--hover--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle	--pf-c-menu-toggle--hover--after--BorderBottomColor	#06c
--pf-c-menu-toggle--hover--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--focus--BackgroundColor	transparent
	.pf-c-menu-toggle	--pf-c-menu-toggle--focus--after--BorderBottomWidth	2px
--pf-c-menu-toggle--focus--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle	--pf-c-menu-toggle--focus--after--BorderBottomColor	#06c
--pf-c-menu-toggle--focus--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--active--BackgroundColor	transparent
	.pf-c-menu-toggle	--pf-c-menu-toggle--active--after--BorderBottomWidth	2px
--pf-c-menu-toggle--active--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle	--pf-c-menu-toggle--active--after--BorderBottomColor	#06c
--pf-c-menu-toggle--active--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-expanded--Color	#151515
--pf-c-menu-toggle--m-expanded--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-expanded--BackgroundColor	transparent
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth	2px
--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-expanded--after--BorderBottomColor	#06c
--pf-c-menu-toggle--m-expanded--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--disabled--Color	#6a6e73
--pf-c-menu-toggle--disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-menu-toggle	--pf-c-menu-toggle--disabled--BackgroundColor	#f0f0f0
--pf-c-menu-toggle--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-primary--Color	#fff
--pf-c-menu-toggle--m-primary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-primary--BorderRadius	3px
--pf-c-menu-toggle--m-primary--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-primary--BackgroundColor	#06c
--pf-c-menu-toggle--m-primary--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-primary--hover--BackgroundColor	#004080
--pf-c-menu-toggle--m-primary--hover--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-primary--focus--BackgroundColor	#004080
--pf-c-menu-toggle--m-primary--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-primary--active--BackgroundColor	#004080
--pf-c-menu-toggle--m-primary--active--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor	#004080
--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-primary--m-expanded--Color	#fff
--pf-c-menu-toggle--m-primary--m-expanded--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--Color	#06c
--pf-c-menu-toggle--m-secondary--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--BorderRadius	3px
--pf-c-menu-toggle--m-secondary--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--BackgroundColor	transparent
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--before--BorderWidth	1px
--pf-c-menu-toggle--m-secondary--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth	2px
--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth	2px
--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--active--before--BorderWidth	2px
--pf-c-menu-toggle--m-secondary--active--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--before--BorderColor	#06c
--pf-c-menu-toggle--m-secondary--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--hover--before--BorderColor	#06c
--pf-c-menu-toggle--m-secondary--hover--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--focus--before--BorderColor	#06c
--pf-c-menu-toggle--m-secondary--focus--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--active--before--BorderColor	#06c
--pf-c-menu-toggle--m-secondary--active--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-secondary--m-expanded--Color	#06c
--pf-c-menu-toggle--m-secondary--m-expanded--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor	#06c
--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth	2px
--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--Color	#6a6e73
--pf-c-menu-toggle--m-plain--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--PaddingRight	1rem
--pf-c-menu-toggle--m-plain--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--PaddingLeft	1rem
--pf-c-menu-toggle--m-plain--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--hover--Color	#151515
--pf-c-menu-toggle--m-plain--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--focus--Color	#151515
--pf-c-menu-toggle--m-plain--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--active--Color	#151515
--pf-c-menu-toggle--m-plain--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--disabled--Color	#d2d2d2
--pf-c-menu-toggle--m-plain--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--m-expanded--Color	#151515
--pf-c-menu-toggle--m-plain--m-expanded--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle	--pf-c-menu-toggle__icon--MarginRight	0.5rem
--pf-c-menu-toggle__icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu-toggle	--pf-c-menu-toggle__count--MarginLeft	0.5rem
--pf-c-menu-toggle__count--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu-toggle	--pf-c-menu-toggle__controls--PaddingLeft	1rem
--pf-c-menu-toggle__controls--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu-toggle	--pf-c-menu-toggle__toggle-icon--MarginRight	0.5rem
--pf-c-menu-toggle__toggle-icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain__toggle-icon--Color	#6a6e73
--pf-c-menu-toggle--m-plain__toggle-icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color	#151515
--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--active__toggle-icon--Color	#151515
--pf-c-menu-toggle--m-plain--active__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color	#151515
--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color	#151515
--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-full-height--PaddingRight	1.5rem
--pf-c-menu-toggle--m-full-height--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-full-height--PaddingLeft	1.5rem
--pf-c-menu-toggle--m-full-height--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth	0
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth	4px
--pf-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth	4px
--pf-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth	4px
--pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth	4px
--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--BackgroundColor	#fff
--pf-c-menu-toggle--m-split-button--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--child--BackgroundColor	#fff
--pf-c-menu-toggle--m-split-button--child--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--child--disabled--Color	#6a6e73
--pf-c-menu-toggle--m-split-button--child--disabled--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor	#f0f0f0
--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--first-child--PaddingRight	0.5rem
--pf-c-menu-toggle--m-split-button--first-child--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--last-child--PaddingLeft	0
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth	1px
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor	#f0f0f0
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--after--Left	0
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth	1px
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor	#8a8d90
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth	1px
--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor	#06c
--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth	2px
--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor	#06c
--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth	2px
--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor	#06c
--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius	3px
--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor	#06c
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor	#004080
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor	#004080
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor	#004080
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor	#004080
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor	#004080
--pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor	#06c
--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle	--pf-c-menu-toggle__button__controls--MarginRight	0.5rem
--pf-c-menu-toggle__button__controls--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu-toggle	--pf-c-menu-toggle__button__controls--MarginLeft	0.5rem
--pf-c-menu-toggle__button__controls--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop	calc(0.375rem * -1)
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop calc(--pf-c-menu-toggle--PaddingTop * -1) calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight	calc(0.5rem * -1)
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight calc(--pf-c-menu-toggle--PaddingRight * -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-toggle	--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom	calc(0.375rem * -1)
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom calc(--pf-c-menu-toggle--PaddingBottom * -1) calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-menu-toggle	--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft	calc(0.5rem * -1)
--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft calc(--pf-c-menu-toggle--PaddingLeft * -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-toggle	--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight	0.5rem
--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu-toggle.pf-m-primary	--pf-c-menu-toggle--BorderRadius	3px
--pf-c-menu-toggle--BorderRadius --pf-c-menu-toggle--m-primary--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-menu-toggle.pf-m-primary	--pf-c-menu-toggle--Color	#fff
--pf-c-menu-toggle--Color --pf-c-menu-toggle--m-primary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-menu-toggle.pf-m-primary	--pf-c-menu-toggle--BackgroundColor	#06c
--pf-c-menu-toggle--BackgroundColor --pf-c-menu-toggle--m-primary--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-primary	--pf-c-menu-toggle--hover--BackgroundColor	#004080
--pf-c-menu-toggle--hover--BackgroundColor --pf-c-menu-toggle--m-primary--hover--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle.pf-m-primary	--pf-c-menu-toggle--focus--BackgroundColor	#004080
--pf-c-menu-toggle--focus--BackgroundColor --pf-c-menu-toggle--m-primary--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle.pf-m-primary	--pf-c-menu-toggle--active--BackgroundColor	#004080
--pf-c-menu-toggle--active--BackgroundColor --pf-c-menu-toggle--m-primary--active--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle.pf-m-primary	--pf-c-menu-toggle--m-expanded--Color	#fff
--pf-c-menu-toggle--m-expanded--Color --pf-c-menu-toggle--m-primary--m-expanded--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-menu-toggle.pf-m-primary	--pf-c-menu-toggle--m-expanded--BackgroundColor	#004080
--pf-c-menu-toggle--m-expanded--BackgroundColor --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle.pf-m-secondary	--pf-c-menu-toggle--Color	#06c
--pf-c-menu-toggle--Color --pf-c-menu-toggle--m-secondary--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-secondary	--pf-c-menu-toggle--m-expanded--Color	#06c
--pf-c-menu-toggle--m-expanded--Color --pf-c-menu-toggle--m-secondary--m-expanded--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-secondary:hover	--pf-c-menu-toggle--m-secondary--before--BorderColor	#06c
--pf-c-menu-toggle--m-secondary--before--BorderColor --pf-c-menu-toggle--m-secondary--hover--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-secondary:hover	--pf-c-menu-toggle--m-secondary--before--BorderWidth	2px
--pf-c-menu-toggle--m-secondary--before--BorderWidth --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle.pf-m-secondary:focus	--pf-c-menu-toggle--m-secondary--before--BorderColor	#06c
--pf-c-menu-toggle--m-secondary--before--BorderColor --pf-c-menu-toggle--m-secondary--focus--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-secondary:focus	--pf-c-menu-toggle--m-secondary--before--BorderWidth	2px
--pf-c-menu-toggle--m-secondary--before--BorderWidth --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle.pf-m-secondary:active	--pf-c-menu-toggle--m-secondary--before--BorderColor	#06c
--pf-c-menu-toggle--m-secondary--before--BorderColor --pf-c-menu-toggle--m-secondary--active--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-secondary:active	--pf-c-menu-toggle--m-secondary--before--BorderWidth	2px
--pf-c-menu-toggle--m-secondary--before--BorderWidth --pf-c-menu-toggle--m-secondary--active--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle.pf-m-secondary.pf-m-expanded	--pf-c-menu-toggle--m-secondary--before--BorderColor	#06c
--pf-c-menu-toggle--m-secondary--before--BorderColor --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-secondary.pf-m-expanded	--pf-c-menu-toggle--m-secondary--before--BorderWidth	2px
--pf-c-menu-toggle--m-secondary--before--BorderWidth --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle.pf-m-plain	--pf-c-menu-toggle__toggle-icon--Color	#6a6e73
--pf-c-menu-toggle__toggle-icon--Color --pf-c-menu-toggle--m-plain__toggle-icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text)	--pf-c-menu-toggle--PaddingRight	1rem
--pf-c-menu-toggle--PaddingRight --pf-c-menu-toggle--m-plain--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text)	--pf-c-menu-toggle--PaddingLeft	1rem
--pf-c-menu-toggle--PaddingLeft --pf-c-menu-toggle--m-plain--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text)	--pf-c-menu-toggle--disabled--BackgroundColor	transparent
	.pf-c-menu-toggle:hover	--pf-c-menu-toggle--BackgroundColor	transparent
--pf-c-menu-toggle--BackgroundColor --pf-c-menu-toggle--hover--BackgroundColor transparent
	.pf-c-menu-toggle:hover	--pf-c-menu-toggle--after--BorderBottomWidth	1px
--pf-c-menu-toggle--after--BorderBottomWidth --pf-c-menu-toggle--hover--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle:hover	--pf-c-menu-toggle--after--BorderBottomColor	#06c
--pf-c-menu-toggle--after--BorderBottomColor --pf-c-menu-toggle--hover--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle:hover	--pf-c-menu-toggle--m-plain__toggle-icon--Color	#151515
--pf-c-menu-toggle--m-plain__toggle-icon--Color --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle:hover	--pf-c-menu-toggle--m-plain--Color	#151515
--pf-c-menu-toggle--m-plain--Color --pf-c-menu-toggle--m-plain--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle:focus	--pf-c-menu-toggle--BackgroundColor	transparent
--pf-c-menu-toggle--BackgroundColor --pf-c-menu-toggle--focus--BackgroundColor transparent
	.pf-c-menu-toggle:focus	--pf-c-menu-toggle--after--BorderBottomWidth	2px
--pf-c-menu-toggle--after--BorderBottomWidth --pf-c-menu-toggle--focus--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle:focus	--pf-c-menu-toggle--after--BorderBottomColor	#06c
--pf-c-menu-toggle--after--BorderBottomColor --pf-c-menu-toggle--focus--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle:focus	--pf-c-menu-toggle--m-plain__toggle-icon--Color	#151515
--pf-c-menu-toggle--m-plain__toggle-icon--Color --pf-c-menu-toggle--m-plain--focus__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle:focus	--pf-c-menu-toggle--m-plain--Color	#151515
--pf-c-menu-toggle--m-plain--Color --pf-c-menu-toggle--m-plain--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle:active	--pf-c-menu-toggle--BackgroundColor	transparent
--pf-c-menu-toggle--BackgroundColor --pf-c-menu-toggle--active--BackgroundColor transparent
	.pf-c-menu-toggle:active	--pf-c-menu-toggle--after--BorderBottomWidth	2px
--pf-c-menu-toggle--after--BorderBottomWidth --pf-c-menu-toggle--active--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle:active	--pf-c-menu-toggle--after--BorderBottomColor	#06c
--pf-c-menu-toggle--after--BorderBottomColor --pf-c-menu-toggle--active--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle:active	--pf-c-menu-toggle--m-plain__toggle-icon--Color	#151515
--pf-c-menu-toggle--m-plain__toggle-icon--Color --pf-c-menu-toggle--m-plain--active__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle:active	--pf-c-menu-toggle--m-plain--Color	#151515
--pf-c-menu-toggle--m-plain--Color --pf-c-menu-toggle--m-plain--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle.pf-m-expanded	--pf-c-menu-toggle--Color	#151515
--pf-c-menu-toggle--Color --pf-c-menu-toggle--m-expanded--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle.pf-m-expanded	--pf-c-menu-toggle--BackgroundColor	transparent
--pf-c-menu-toggle--BackgroundColor --pf-c-menu-toggle--m-expanded--BackgroundColor transparent
	.pf-c-menu-toggle.pf-m-expanded	--pf-c-menu-toggle--after--BorderBottomWidth	2px
--pf-c-menu-toggle--after--BorderBottomWidth --pf-c-menu-toggle--m-expanded--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle.pf-m-expanded	--pf-c-menu-toggle--after--BorderBottomColor	#06c
--pf-c-menu-toggle--after--BorderBottomColor --pf-c-menu-toggle--m-expanded--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-expanded	--pf-c-menu-toggle--m-plain__toggle-icon--Color	#151515
--pf-c-menu-toggle--m-plain__toggle-icon--Color --pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle.pf-m-expanded	--pf-c-menu-toggle--m-plain--Color	#151515
--pf-c-menu-toggle--m-plain--Color --pf-c-menu-toggle--m-plain--m-expanded--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-menu-toggle:disabled	--pf-c-menu-toggle--Color	#6a6e73
--pf-c-menu-toggle--Color --pf-c-menu-toggle--disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-menu-toggle:disabled	--pf-c-menu-toggle--BackgroundColor	#f0f0f0
--pf-c-menu-toggle--BackgroundColor --pf-c-menu-toggle--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-menu-toggle:disabled	--pf-c-menu-toggle--m-plain--Color	#d2d2d2
--pf-c-menu-toggle--m-plain--Color --pf-c-menu-toggle--m-plain--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-menu-toggle.pf-m-full-height	--pf-c-menu-toggle--PaddingRight	1.5rem
--pf-c-menu-toggle--PaddingRight --pf-c-menu-toggle--m-full-height--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-menu-toggle.pf-m-full-height	--pf-c-menu-toggle--PaddingLeft	1.5rem
--pf-c-menu-toggle--PaddingLeft --pf-c-menu-toggle--m-full-height--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-menu-toggle.pf-m-full-height	--pf-c-menu-toggle--before--BorderTopWidth	0
--pf-c-menu-toggle--before--BorderTopWidth --pf-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth 0
	.pf-c-menu-toggle.pf-m-full-height	--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth	4px
--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth --pf-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-menu-toggle.pf-m-full-height	--pf-c-menu-toggle--hover--after--BorderBottomWidth	4px
--pf-c-menu-toggle--hover--after--BorderBottomWidth --pf-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-menu-toggle.pf-m-full-height	--pf-c-menu-toggle--focus--after--BorderBottomWidth	4px
--pf-c-menu-toggle--focus--after--BorderBottomWidth --pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-menu-toggle.pf-m-full-height	--pf-c-menu-toggle--active--after--BorderBottomWidth	4px
--pf-c-menu-toggle--active--after--BorderBottomWidth --pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group	--pf-c-text-input-group__utilities--c-button--PaddingRight	0.5rem
--pf-c-text-input-group__utilities--c-button--PaddingRight --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-menu-toggle.pf-m-split-button	--pf-c-menu-toggle__toggle-icon--MarginRight	0
	.pf-c-menu-toggle.pf-m-split-button > .pf-c-check	--pf-c-menu-toggle--PaddingRight	0
	.pf-c-menu-toggle.pf-m-split-button > .pf-c-check	--pf-c-check__input--MarginTop	0
	.pf-c-menu-toggle.pf-m-split-button > .pf-c-check	--pf-c-check__label--Color	currentColor
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover	--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth	1px
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth --pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover	--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor	#06c
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor --pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus	--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth	2px
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth --pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus	--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor	#06c
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor --pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:active	--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth	2px
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth --pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:active	--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor	#06c
--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor --pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary	--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor	#004080
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary	--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth	0
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):hover	--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor	#004080
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):focus	--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor	#004080
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):active	--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor	#004080
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded	--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor	#004080
--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor --pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary	--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor	#06c
--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child)	--pf-c-menu-toggle--m-split-button--m-action--child--after--Left	calc(1px * -1)
--pf-c-menu-toggle--m-split-button--m-action--child--after--Left calc(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth * -1) calc(--pf-global--BorderWidth--sm * -1) calc($pf-global--BorderWidth--sm * -1) calc(1px * -1)
	.pf-c-menu-toggle.pf-m-split-button.pf-m-action:not(.pf-m-expanded)	--pf-c-menu-toggle--after--BorderBottomColor	transparent
	.pf-c-menu-toggle.pf-m-split-button.pf-m-disabled	--pf-c-menu-toggle--m-split-button--child--BackgroundColor	#f0f0f0
--pf-c-menu-toggle--m-split-button--child--BackgroundColor --pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-menu-toggle.pf-m-split-button.pf-m-disabled	--pf-c-menu-toggle--m-split-button--child--Color	#6a6e73
--pf-c-menu-toggle--m-split-button--child--Color --pf-c-menu-toggle--m-split-button--child--disabled--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-menu-toggle.pf-m-split-button.pf-m-disabled	--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor	transparent
	.pf-c-menu-toggle.pf-m-split-button > .pf-m-disabled	--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor	transparent
	.pf-c-menu-toggle.pf-m-typeahead	--pf-c-menu-toggle__toggle-icon--MarginRight	0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines