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.

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

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

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