Skip to content
PatternFly logo

Menu toggle

The menu toggle component pairs with the menu OR the panel component to create more customizable dropdown and select implementations. Using a menu toggle with a menu enables you to create custom component configurations not supported by the standard dropdown or select components.

Examples

Collapsed

Expanded

Disabled

Count

Primary

Secondary

Plain

Plain with text

Split button (checkbox)

Split button (checkbox with toggle text)

Split button (checkbox, primary)

Split button (checkbox, secondary)

Split button (action)

Split button (action, primary)

Split button (action, secondary)

With icon/image and text

With avatar and text

Full height

Full width

Props

*required
NameTypeDefaultDescription
badgeBadgeProps | React.ReactNodeOptional badge rendered inside the toggle, after the children content
childrenReact.ReactNodeContent rendered inside the toggle
classNamestringAdditional classes added to the toggle
iconReact.ReactNodeOptional icon rendered inside the toggle, before the children content
innerRefReact.Ref<MenuToggleElement>Forwarded ref
isDisabledbooleanFlag indicating the toggle is disabled
isExpandedbooleanFlag indicating the toggle has expanded styling
isFullHeightbooleanFlag indicating the toggle is full height
isFullWidthbooleanFlag indicating the toggle takes up the full width of its parent
splitButtonOptionsSplitButtonOptionsObject used to configure a split button menu toggle
variant'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead'Variant styles of the menu toggle
*required
NameTypeDefaultDescription
childrenReact.ReactNodeElement to be rendered inside the <button>
classNamestring''Additional classes added to the MenuToggleAction
idstringId of the action button
isDisabledbooleanfalseFlag to show if the action button is disabled
onClick(event: React.MouseEvent<HTMLButtonElement>) => void() => {}A callback for when the action button is clicked
*required
NameTypeDefaultDescription
idrequiredstringId of the checkbox
childrenReact.ReactNodeElement to be rendered inside the <span>
classNamestringAdditional classes added to the MenuToggleCheckbox
defaultCheckedboolean | nullFlag to set the default checked value of the checkbox when it is uncontrolled by React state. To make the checkbox controlled instead use the isChecked prop, but do not use both.
isCheckedboolean | nullFlag to show if the checkbox is checked when it is controlled by React state. To make the checkbox uncontrolled instead use the defaultChecked prop, but do not use both.
isDisabledbooleanfalseFlag to show if the checkbox is disabled
isValidbooleantrueFlag to show if the checkbox selection is valid or invalid
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void() => undefined as anyA callback for when the checkbox selection changes
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

SplitButtonOptions

*required
NameTypeDefaultDescription
itemsrequiredReact.ReactNode[]Elements to display before the toggle button. When included, renders the menu toggle as a split button.
variant'action' | 'checkbox'Variant of split button 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--pf-c-menu-toggle--PaddingRight
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--PaddingBottom
0.375rem
.pf-c-menu-toggle--pf-c-menu-toggle--PaddingLeft
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--FontSize
1rem
.pf-c-menu-toggle--pf-c-menu-toggle--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--LineHeight
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--pf-c-menu-toggle--before--BorderRightWidth
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--pf-c-menu-toggle--before--BorderTopColor
#f0f0f0
.pf-c-menu-toggle--pf-c-menu-toggle--before--BorderRightColor
#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--pf-c-menu-toggle--after--BorderBottomWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--after--BorderBottomColor
#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--pf-c-menu-toggle--hover--after--BorderBottomColor
#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--pf-c-menu-toggle--focus--after--BorderBottomColor
#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--pf-c-menu-toggle--active--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-expanded--Color
#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--pf-c-menu-toggle--m-expanded--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--disabled--Color
#6a6e73
.pf-c-menu-toggle--pf-c-menu-toggle--disabled--BackgroundColor
#f0f0f0
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--Color
#fff
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--BorderRadius
3px
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--BackgroundColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--hover--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--focus--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--active--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--m-expanded--Color
#fff
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--Color
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--BorderRadius
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--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--active--before--BorderWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--hover--before--BorderColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--focus--before--BorderColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--active--before--BorderColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--m-expanded--Color
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--Color
#6a6e73
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--PaddingRight
1rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--PaddingLeft
1rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--hover--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--focus--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--active--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--disabled--Color
#d2d2d2
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--m-expanded--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle__icon--MarginRight
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle__count--MarginLeft
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle__controls--PaddingLeft
1rem
.pf-c-menu-toggle--pf-c-menu-toggle__controls--MarginLeft
auto
.pf-c-menu-toggle--pf-c-menu-toggle__controls--MarginRight
0
.pf-c-menu-toggle--pf-c-menu-toggle__toggle-icon--MarginRight
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain__toggle-icon--Color
#6a6e73
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--active__toggle-icon--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height--PaddingRight
1.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height--PaddingLeft
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--pf-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth
4px
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth
4px
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth
4px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--BackgroundColor
#fff
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--child--BackgroundColor
#fff
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--child--disabled--Color
#6a6e73
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor
#f0f0f0
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--first-child--PaddingRight
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--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
#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--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor
#8a8d90
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius
3px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor
#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--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle__button__controls--MarginRight
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle__button__controls--MarginLeft
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-typeahead__controls--MarginRight
1rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-typeahead__controls--MarginLeft
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight
0.5rem
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--BorderRadius
3px
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--Color
#fff
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--BackgroundColor
#06c
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--hover--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--focus--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--active--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--m-expanded--Color
#fff
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--m-expanded--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-secondary--pf-c-menu-toggle--Color
#06c
.pf-c-menu-toggle.pf-m-secondary--pf-c-menu-toggle--m-expanded--Color
#06c
.pf-c-menu-toggle.pf-m-secondary:hover--pf-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle.pf-m-secondary:hover--pf-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-c-menu-toggle.pf-m-secondary:focus--pf-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle.pf-m-secondary:focus--pf-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-c-menu-toggle.pf-m-secondary:active--pf-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle.pf-m-secondary:active--pf-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-c-menu-toggle.pf-m-secondary.pf-m-expanded--pf-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle.pf-m-secondary.pf-m-expanded--pf-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-c-menu-toggle.pf-m-plain--pf-c-menu-toggle__toggle-icon--Color
#6a6e73
.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text)--pf-c-menu-toggle--PaddingRight
1rem
.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text)--pf-c-menu-toggle--PaddingLeft
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:hover--pf-c-menu-toggle--after--BorderBottomWidth
1px
.pf-c-menu-toggle:hover--pf-c-menu-toggle--after--BorderBottomColor
#06c
.pf-c-menu-toggle:hover--pf-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-c-menu-toggle:hover--pf-c-menu-toggle--m-plain--Color
#151515
.pf-c-menu-toggle:focus--pf-c-menu-toggle--BackgroundColor
transparent
.pf-c-menu-toggle:focus--pf-c-menu-toggle--after--BorderBottomWidth
2px
.pf-c-menu-toggle:focus--pf-c-menu-toggle--after--BorderBottomColor
#06c
.pf-c-menu-toggle:focus--pf-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-c-menu-toggle:focus--pf-c-menu-toggle--m-plain--Color
#151515
.pf-c-menu-toggle:active--pf-c-menu-toggle--BackgroundColor
transparent
.pf-c-menu-toggle:active--pf-c-menu-toggle--after--BorderBottomWidth
2px
.pf-c-menu-toggle:active--pf-c-menu-toggle--after--BorderBottomColor
#06c
.pf-c-menu-toggle:active--pf-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-c-menu-toggle:active--pf-c-menu-toggle--m-plain--Color
#151515
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--Color
#151515
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--BackgroundColor
transparent
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--after--BorderBottomWidth
2px
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--after--BorderBottomColor
#06c
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--m-plain--Color
#151515
.pf-c-menu-toggle:disabled--pf-c-menu-toggle--Color
#6a6e73
.pf-c-menu-toggle:disabled--pf-c-menu-toggle--BackgroundColor
#f0f0f0
.pf-c-menu-toggle:disabled--pf-c-menu-toggle--m-plain--Color
#d2d2d2
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--PaddingRight
1.5rem
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--PaddingLeft
1.5rem
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-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.pf-m-full-height--pf-c-menu-toggle--hover--after--BorderBottomWidth
4px
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--focus--after--BorderBottomWidth
4px
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--active--after--BorderBottomWidth
4px
.pf-c-menu-toggle.pf-m-typeahead--pf-c-menu-toggle__button__controls--MarginRight
1rem
.pf-c-menu-toggle.pf-m-typeahead--pf-c-menu-toggle__button__controls--MarginLeft
0.5rem
.pf-c-menu-toggle.pf-m-typeahead--pf-c-menu-toggle__toggle-icon--MarginRight
0
.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-menu-toggle.pf-m-typeahead .pf-c-text-input-group--pf-c-text-input-group__utilities--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.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.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.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.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.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.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.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.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.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.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.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.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.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.pf-m-split-button.pf-m-disabled--pf-c-menu-toggle--m-split-button--child--Color
#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__button--pf-c-menu-toggle__controls--PaddingLeft
0
.pf-c-menu-toggle__button--pf-c-menu-toggle__controls--MarginRight
0.5rem
.pf-c-menu-toggle__button--pf-c-menu-toggle__controls--MarginLeft
0.5rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines