Skip to content
PatternFly

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 label)

 
 
 

Split button (checkbox with toggle button 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

Status





Documentation

Accessibility

Class
Applied to
Outcome
aria-expanded="true"
.pf-v5-c-menu-toggle, .pf-v5-c-menu-toggle__button
Indicates that the menu toggle component is in the expanded state.
aria-expanded="false"
.pf-v5-c-menu-toggle, .pf-v5-c-menu-toggle__button
Indicates that the menu toggle component is in the collapsed state.
aria-label="Descriptive text"
.pf-v5-c-menu-toggle, .pf-v5-c-menu-toggle.pf-m-plain
Gives the menu toggle component an accessible label. Used whenever there is no text visible in the menu toggle. Often, plain modifiers are used when the menu toggle only contains an icon.
disabled
.pf-v5-c-menu-toggle, .pf-v5-c-menu-toggle__button
Indicates that the menu toggle component is disabled.

Usage

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

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--BorderRadius
0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--PaddingTop
0.375rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--PaddingRight
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--PaddingBottom
0.375rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--PaddingLeft
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--FontSize
1rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--Color
#151515
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--LineHeight
1.5
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderTopWidth
1px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderRightWidth
1px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderBottomWidth
0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderLeftWidth
1px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderTopColor
#f0f0f0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderRightColor
#f0f0f0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderBottomColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderLeftColor
#f0f0f0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--after--BorderBottomWidth
1px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--after--BorderBottomColor
#8a8d90
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--hover--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth
1px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--hover--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--focus--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--focus--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--focus--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--active--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--active--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--active--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-expanded--Color
#151515
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-expanded--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--disabled--Color
#6a6e73
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--disabled--BackgroundColor
#f0f0f0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-primary--Color
#fff
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-primary--BorderRadius
3px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-primary--BackgroundColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-primary--hover--BackgroundColor
#004080
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-primary--focus--BackgroundColor
#004080
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-primary--active--BackgroundColor
#004080
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-primary--m-expanded--BackgroundColor
#004080
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-primary--m-expanded--Color
#fff
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--Color
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--BorderRadius
3px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--hover--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--focus--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--active--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--before--BorderWidth
1px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--hover--before--BorderWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--focus--before--BorderWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--active--before--BorderWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--hover--before--BorderColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--focus--before--BorderColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--active--before--BorderColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--m-expanded--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-secondary--m-expanded--Color
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--Color
#6a6e73
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--PaddingRight
1rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--PaddingLeft
1rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--hover--Color
#151515
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--focus--Color
#151515
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--active--Color
#151515
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--disabled--Color
#d2d2d2
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--m-expanded--Color
#151515
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__icon--MarginRight
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__count--MarginLeft
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__controls--PaddingLeft
1rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__controls--MarginLeft
auto
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__controls--MarginRight
0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__toggle-icon--MarginRight
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color
#6a6e73
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--hover__toggle-icon--Color
#151515
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--active__toggle-icon--Color
#151515
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--focus__toggle-icon--Color
#151515
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color
#151515
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-full-height--PaddingRight
1.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-full-height--PaddingLeft
1.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth
0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth
1px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth
4px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth
4px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth
4px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth
4px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--BackgroundColor
#fff
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor
#fff
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--child--disabled--Color
#6a6e73
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor
#f0f0f0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft
0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth
1px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
#f0f0f0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--Left
0
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth
1px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor
#8a8d90
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth
1px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius
3px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor
#004080
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor
#004080
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor
#004080
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor
#004080
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor
#004080
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor
#06c
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__button--BackgroundColor
transparent
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__button--AlignSelf
baseline
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__button--PaddingLeft
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__button--PaddingRight
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__button__controls--MarginRight
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__button__controls--MarginLeft
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart
0.25rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight
0.5rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf
center
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle__status-icon--MarginInlineEnd
1rem
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-success--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-success--after--BorderBottomColor
#3e8635
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-success__status-icon--Color
#3e8635
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-warning--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-warning--after--BorderBottomColor
#f0ab00
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-warning__status-icon--Color
#f0ab00
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-danger--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-danger--after--BorderBottomColor
#c9190b
.pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-danger__status-icon--Color
#c9190b
.pf-v5-c-menu-toggle.pf-m-primary--pf-v5-c-menu-toggle--BorderRadius
3px
.pf-v5-c-menu-toggle.pf-m-primary--pf-v5-c-menu-toggle--Color
#fff
.pf-v5-c-menu-toggle.pf-m-primary--pf-v5-c-menu-toggle--BackgroundColor
#06c
.pf-v5-c-menu-toggle.pf-m-primary--pf-v5-c-menu-toggle--hover--BackgroundColor
#004080
.pf-v5-c-menu-toggle.pf-m-primary--pf-v5-c-menu-toggle--focus--BackgroundColor
#004080
.pf-v5-c-menu-toggle.pf-m-primary--pf-v5-c-menu-toggle--active--BackgroundColor
#004080
.pf-v5-c-menu-toggle.pf-m-primary--pf-v5-c-menu-toggle--m-expanded--Color
#fff
.pf-v5-c-menu-toggle.pf-m-primary--pf-v5-c-menu-toggle--m-expanded--BackgroundColor
#004080
.pf-v5-c-menu-toggle.pf-m-secondary--pf-v5-c-menu-toggle--Color
#06c
.pf-v5-c-menu-toggle.pf-m-secondary--pf-v5-c-menu-toggle--BackgroundColor
transparent
.pf-v5-c-menu-toggle.pf-m-secondary--pf-v5-c-menu-toggle--hover--BackgroundColor
transparent
.pf-v5-c-menu-toggle.pf-m-secondary--pf-v5-c-menu-toggle--focus--BackgroundColor
transparent
.pf-v5-c-menu-toggle.pf-m-secondary--pf-v5-c-menu-toggle--active--BackgroundColor
transparent
.pf-v5-c-menu-toggle.pf-m-secondary--pf-v5-c-menu-toggle--m-expanded--BackgroundColor
transparent
.pf-v5-c-menu-toggle.pf-m-secondary--pf-v5-c-menu-toggle--m-expanded--Color
#06c
.pf-v5-c-menu-toggle.pf-m-secondary:hover--pf-v5-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-v5-c-menu-toggle.pf-m-secondary:hover--pf-v5-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-v5-c-menu-toggle.pf-m-secondary:focus--pf-v5-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-v5-c-menu-toggle.pf-m-secondary:focus--pf-v5-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-v5-c-menu-toggle.pf-m-secondary:active--pf-v5-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-v5-c-menu-toggle.pf-m-secondary:active--pf-v5-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-v5-c-menu-toggle.pf-m-secondary.pf-m-expanded--pf-v5-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-v5-c-menu-toggle.pf-m-secondary.pf-m-expanded--pf-v5-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-v5-c-menu-toggle.pf-m-plain--pf-v5-c-menu-toggle__toggle-icon--Color
#6a6e73
.pf-v5-c-menu-toggle.pf-m-plain:not(.pf-m-text)--pf-v5-c-menu-toggle--PaddingRight
1rem
.pf-v5-c-menu-toggle.pf-m-plain:not(.pf-m-text)--pf-v5-c-menu-toggle--PaddingLeft
1rem
.pf-v5-c-menu-toggle.pf-m-plain:not(.pf-m-text)--pf-v5-c-menu-toggle--disabled--BackgroundColor
transparent
.pf-v5-c-menu-toggle.pf-m-full-height--pf-v5-c-menu-toggle--PaddingRight
1.5rem
.pf-v5-c-menu-toggle.pf-m-full-height--pf-v5-c-menu-toggle--PaddingLeft
1.5rem
.pf-v5-c-menu-toggle.pf-m-full-height--pf-v5-c-menu-toggle--before--BorderTopWidth
0
.pf-v5-c-menu-toggle.pf-m-full-height--pf-v5-c-menu-toggle--after--BorderBottomWidth
1px
.pf-v5-c-menu-toggle.pf-m-full-height--pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth
4px
.pf-v5-c-menu-toggle.pf-m-full-height--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth
4px
.pf-v5-c-menu-toggle.pf-m-full-height--pf-v5-c-menu-toggle--focus--after--BorderBottomWidth
4px
.pf-v5-c-menu-toggle.pf-m-full-height--pf-v5-c-menu-toggle--active--after--BorderBottomWidth
4px
.pf-v5-c-menu-toggle:hover--pf-v5-c-menu-toggle--BackgroundColor
transparent
.pf-v5-c-menu-toggle:hover--pf-v5-c-menu-toggle--after--BorderBottomWidth
1px
.pf-v5-c-menu-toggle:hover--pf-v5-c-menu-toggle--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle:hover--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-v5-c-menu-toggle:hover--pf-v5-c-menu-toggle--m-plain--Color
#151515
.pf-v5-c-menu-toggle:focus--pf-v5-c-menu-toggle--BackgroundColor
transparent
.pf-v5-c-menu-toggle:focus--pf-v5-c-menu-toggle--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle:focus--pf-v5-c-menu-toggle--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle:focus--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-v5-c-menu-toggle:focus--pf-v5-c-menu-toggle--m-plain--Color
#151515
.pf-v5-c-menu-toggle:active--pf-v5-c-menu-toggle--BackgroundColor
transparent
.pf-v5-c-menu-toggle:active--pf-v5-c-menu-toggle--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle:active--pf-v5-c-menu-toggle--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle:active--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-v5-c-menu-toggle:active--pf-v5-c-menu-toggle--m-plain--Color
#151515
.pf-v5-c-menu-toggle.pf-m-expanded--pf-v5-c-menu-toggle--Color
#151515
.pf-v5-c-menu-toggle.pf-m-expanded--pf-v5-c-menu-toggle--BackgroundColor
transparent
.pf-v5-c-menu-toggle.pf-m-expanded--pf-v5-c-menu-toggle--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle.pf-m-expanded--pf-v5-c-menu-toggle--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle.pf-m-expanded--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-v5-c-menu-toggle.pf-m-expanded--pf-v5-c-menu-toggle--m-plain--Color
#151515
.pf-v5-c-menu-toggle:disabled--pf-v5-c-menu-toggle--Color
#6a6e73
.pf-v5-c-menu-toggle:disabled--pf-v5-c-menu-toggle--BackgroundColor
#f0f0f0
.pf-v5-c-menu-toggle:disabled--pf-v5-c-menu-toggle--m-plain--Color
#d2d2d2
.pf-v5-c-menu-toggle.pf-m-typeahead--pf-v5-c-menu-toggle__button__controls--MarginRight
0.5rem
.pf-v5-c-menu-toggle.pf-m-typeahead--pf-v5-c-menu-toggle__button__controls--MarginLeft
0.5rem
.pf-v5-c-menu-toggle.pf-m-typeahead--pf-v5-c-menu-toggle__button--AlignSelf
center
.pf-v5-c-menu-toggle.pf-m-typeahead--pf-v5-c-menu-toggle__toggle-icon--MarginRight
0
.pf-v5-c-menu-toggle.pf-m-typeahead .pf-v5-c-text-input-group--pf-v5-c-text-input-group__utilities--c-button--PaddingRight
0.5rem
.pf-v5-c-menu-toggle.pf-m-typeahead .pf-v5-c-text-input-group--pf-v5-c-text-input-group__utilities--MarginRight
0
.pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check--pf-v5-c-menu-toggle--PaddingRight
0
.pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check--pf-v5-c-check__label--Color
currentcolor
.pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check--pf-v5-c-check__label--disabled--Color
currentcolor
.pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input--pf-v5-c-check__input--TranslateY
0
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth
1px
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:active--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:active--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor
#06c
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
#004080
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth
0
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):hover--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#004080
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):focus--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#004080
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):active--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#004080
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#004080
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
#06c
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child)--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--Left
calc(1px * -1)
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:not(.pf-m-expanded)--pf-v5-c-menu-toggle--after--BorderBottomColor
transparent
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-disabled--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
transparent
.pf-v5-c-menu-toggle.pf-m-split-button > .pf-m-disabled--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
transparent
.pf-v5-c-menu-toggle.pf-m-success--pf-v5-c-menu-toggle--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle.pf-m-success--pf-v5-c-menu-toggle--after--BorderBottomColor
#3e8635
.pf-v5-c-menu-toggle.pf-m-success--pf-v5-c-menu-toggle__status-icon--Color
#3e8635
.pf-v5-c-menu-toggle.pf-m-warning--pf-v5-c-menu-toggle--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle.pf-m-warning--pf-v5-c-menu-toggle--after--BorderBottomColor
#f0ab00
.pf-v5-c-menu-toggle.pf-m-warning--pf-v5-c-menu-toggle__status-icon--Color
#f0ab00
.pf-v5-c-menu-toggle.pf-m-danger--pf-v5-c-menu-toggle--after--BorderBottomWidth
2px
.pf-v5-c-menu-toggle.pf-m-danger--pf-v5-c-menu-toggle--after--BorderBottomColor
#c9190b
.pf-v5-c-menu-toggle.pf-m-danger--pf-v5-c-menu-toggle__status-icon--Color
#c9190b
.pf-v5-c-menu-toggle__button--pf-v5-c-menu-toggle__controls--PaddingLeft
0
.pf-v5-c-menu-toggle__button--pf-v5-c-menu-toggle__controls--MarginRight
0.5rem
.pf-v5-c-menu-toggle__button--pf-v5-c-menu-toggle__controls--MarginLeft
0.5rem
.pf-v5-c-menu-toggle__button.pf-m-text--pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft
0.25rem

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines