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, primary

 
 

Split button, secondary

 
 

Split button (action)

 
 

Split button, primary (action)

 
 

Split button, secondary (action)

 
 

With icon/image and text

 

With avatar and text

   

Full height

Typeahead

Accessibility

Class
Applied to
Outcome
aria-expanded="true"
.pf-c-menu-toggle, .pf-c-menu-toggle__button
Indicates that the menu toggle component is in the expanded state.
aria-expanded="false"
.pf-c-menu-toggle, .pf-c-menu-toggle__button
Indicates that the menu toggle component is in the collapsed state.
aria-label="Descriptive text"
.pf-c-menu-toggle.pf-m-plain
Gives the plain menu toggle component an accessible label.
disabled
.pf-c-menu-toggle, .pf-c-menu-toggle__button
Indicates that the menu toggle component is disabled.

Usage

Class
Applied
Outcome
.pf-c-menu-toggle
<button>
Initiates the menu toggle component.
.pf-c-menu-toggle__icon
<span>
Defines the menu toggle component icon/image.
.pf-c-menu-toggle__text
<span>
Defines the menu toggle component text.
.pf-c-menu-toggle__count
<span>
Defines the menu toggle component count.
.pf-c-menu-toggle__controls
<span>
Defines the menu toggle component controls.
.pf-c-menu-toggle__toggle-icon
<span>
Defines the menu toggle component toggle/arrow icon.
.pf-c-menu-toggle__button
<button>
Initiates the menu toggle button.
.pf-m-split-button
.pf-c-menu-toggle
Modifies the menu toggle component for the split button variation.
.pf-m-action
.pf-c-menu-toggle.pf-m-split-button
Modifies the menu toggle component for the action, split button variation.
.pf-m-disabled
.pf-c-menu-toggle
Modifies the menu toggle component for the disabled variation.
.pf-m-primary
.pf-c-menu-toggle
Modifies the menu toggle component for the primary variation.
.pf-m-secondary
.pf-c-menu-toggle
Modifies the menu toggle component for the secondary variation.
.pf-m-text
.pf-c-menu-toggle
Modifies the menu toggle component for the text variation.
.pf-m-plain
.pf-c-menu-toggle
Modifies the menu toggle component for the plain variation.
.pf-m-expanded
.pf-c-menu-toggle
Modifies the menu toggle component for the expanded state.
.pf-m-full-height
.pf-c-menu-toggle
Modifies the menu toggle component to full height of parent.

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