Skip to content

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 toggle with checkbox

 
 

Split toggle with labeled checkbox

To add a label to a split toggle that will be linked to the checkbox, pass the text wrapped in span.pf-v6-c-check__label as a child to label.pf-v6-c-check. Clicking the text will update the checked state of the split toggle's checkbox.

 
 

Split toggle with checkbox and toggle text

To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in span.pf-v6-c-menu-toggle__text as a child to button.pf-v6-c-menu-toggle__button.pf-m-text. Clicking the text should trigger any click action on the toggle.

 
 

Small

   

Small with 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

Full width

Typeahead

Status





Placeholder

Documentation

Accessibility

Class
Applied to
Outcome
aria-expanded="true"
.pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle__button
Indicates that the menu toggle component is in the expanded state.
aria-expanded="false"
.pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle__button
Indicates that the menu toggle component is in the collapsed state.
aria-label="Descriptive text"
.pf-v6-c-menu-toggle, .pf-v6-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-v6-c-menu-toggle, .pf-v6-c-menu-toggle__button
Indicates that the menu toggle component is disabled.

Usage

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

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--ColumnGap
0.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--PaddingBlockStart
0.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--MinWidth
calc(0.875rem * 1.5 + 0.5rem + 0.5rem)
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--FontSize
0.875rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--Color
(In light theme) #151515
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--LineHeight
1.5
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--BackgroundColor
(In light theme) #ffffff
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--BorderRadius
6px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--BorderColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--BorderWidth
1px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--border--ZIndex
100
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--TransitionDuration
100ms
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--TransitionProperty
color, background-color, border-width, border-color
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--hover--Color
(In light theme) #151515
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--hover--BackgroundColor
(In light theme) #ffffff
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--hover--BorderWidth
1px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--hover--BorderColor
(In light theme) #4394e5
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--hover__toggle-icon--Color
(In light theme) #1f1f1f
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--expanded--Color
(In light theme) #151515
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--expanded--BackgroundColor
(In light theme) #ffffff
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--expanded--BorderWidth
2px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--expanded--BorderColor
(In light theme) #0066cc
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--expanded__toggle-icon--Color
(In light theme) #1f1f1f
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--disabled--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--disabled--BackgroundColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle__icon--MinHeight
calc(0.875rem * 1.5)
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle__toggle-icon--MinHeight
calc(0.875rem * 1.5)
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-button--PaddingInlineStart
1.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd
1.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-button--BorderRadius
999px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart
1.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd
1.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--BackgroundColor
(In light theme) #0066cc
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--BorderRadius
999px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--BorderColor
transparent
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--hover--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor
(In light theme) #004d99
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--hover--BorderColor
transparent
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--expanded--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor
(In light theme) #004d99
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor
transparent
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart
1.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd
1.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--Color
(In light theme) #0066cc
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--BorderColor
(In light theme) #0066cc
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--BorderRadius
999px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--hover--Color
(In light theme) #004d99
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth
2px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor
(In light theme) #004d99
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--expanded--Color
(In light theme) #004d99
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth
2px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor
(In light theme) #004d99
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color
(In light theme) #0066cc
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color
(In light theme) #004d99
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color
(In light theme) #004d99
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle__controls--MinWidth
calc(0.875rem + 0.5rem + 0.5rem)
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd
1.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart
1.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth
1px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius
999px
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
(In light theme) #0066cc
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor
(In light theme) #004d99
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor
(In light theme) #004d99
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor
(In light theme) #0066cc
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle__button--BackgroundColor
transparent
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle__button--AlignSelf
baseline
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle__button--PaddingInlineStart
0.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle__button--PaddingInlineEnd
0.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle__button--MinWidth
calc(0.875rem * 1.5 + 0.5rem + 0.5rem)
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart
0.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-plain--Color
(In light theme) #1f1f1f
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-plain--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-plain--BorderColor
transparent
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-plain--disabled--Color
(In light theme) #a3a3a3
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor
transparent
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf
stretch
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-small--PaddingBlockStart
0.25rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd
0.25rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-small--PaddingInlineStart
0.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd
0.5rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle__status-icon--MarginInlineEnd
1rem
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-success--BorderColor
(In light theme) #3d7317
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-success__status-icon--Color
(In light theme) #3d7317
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-warning--BorderColor
(In light theme) #dca614
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-warning__status-icon--Color
(In light theme) #dca614
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-danger--BorderColor
(In light theme) #b1380b
:where(:root, .pf-v6-c-menu-toggle)--pf-v6-c-menu-toggle--m-danger__status-icon--Color
(In light theme) #b1380b
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--PaddingInlineStart
1.5rem
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--PaddingInlineEnd
1.5rem
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--Color
(In light theme) #ffffff
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--BorderRadius
999px
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--BorderColor
transparent
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--hover--Color
(In light theme) #ffffff
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--hover--BackgroundColor
(In light theme) #004d99
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--hover--BorderColor
transparent
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--expanded--Color
(In light theme) #ffffff
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--expanded--BackgroundColor
(In light theme) #004d99
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--expanded--BorderColor
transparent
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--hover__toggle-icon--Color
(In light theme) #ffffff
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--expanded__toggle-icon--Color
(In light theme) #ffffff
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--PaddingInlineStart
1.5rem
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--PaddingInlineEnd
1.5rem
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--Color
(In light theme) #0066cc
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--BorderColor
(In light theme) #0066cc
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--BorderRadius
999px
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--hover--Color
(In light theme) #004d99
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--hover--BorderWidth
2px
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--hover--BorderColor
(In light theme) #004d99
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--expanded--Color
(In light theme) #004d99
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--expanded--BorderWidth
2px
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--hover__toggle-icon--Color
(In light theme) #004d99
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--expanded__toggle-icon--Color
(In light theme) #004d99
.pf-v6-c-menu-toggle.pf-m-full-height--pf-v6-c-menu-toggle--PaddingInlineEnd
1.5rem
.pf-v6-c-menu-toggle.pf-m-full-height--pf-v6-c-menu-toggle--PaddingInlineStart
1.5rem
.pf-v6-c-menu-toggle.pf-m-full-height--pf-v6-c-menu-toggle--BorderBlockStartWidth
undefined
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--Color
(In light theme) #1f1f1f
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--BorderColor
transparent
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--expanded--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--disabled--Color
(In light theme) #a3a3a3
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--disabled--BackgroundColor
transparent
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle--Color
(In light theme) #151515
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle--BorderWidth
1px
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle--BorderColor
(In light theme) #4394e5
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle__toggle-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true])--pf-v6-c-menu-toggle--Color
(In light theme) #151515
.pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true])--pf-v6-c-menu-toggle--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true])--pf-v6-c-menu-toggle--BorderWidth
2px
.pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true])--pf-v6-c-menu-toggle--BorderColor
(In light theme) #0066cc
.pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true])--pf-v6-c-menu-toggle__toggle-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)--pf-v6-c-menu-toggle--Color
(In light theme) #4d4d4d
.pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)--pf-v6-c-menu-toggle--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle--PaddingBlockStart
0.25rem
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle--PaddingBlockEnd
0.25rem
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle--PaddingInlineStart
0.5rem
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle--PaddingInlineEnd
0.5rem
.pf-v6-c-menu-toggle.pf-m-success--pf-v6-c-menu-toggle--BorderColor
(In light theme) #3d7317
.pf-v6-c-menu-toggle.pf-m-success--pf-v6-c-menu-toggle__status-icon--Color
(In light theme) #3d7317
.pf-v6-c-menu-toggle.pf-m-warning--pf-v6-c-menu-toggle--BorderColor
(In light theme) #dca614
.pf-v6-c-menu-toggle.pf-m-warning--pf-v6-c-menu-toggle__status-icon--Color
(In light theme) #dca614
.pf-v6-c-menu-toggle.pf-m-danger--pf-v6-c-menu-toggle--BorderColor
(In light theme) #b1380b
.pf-v6-c-menu-toggle.pf-m-danger--pf-v6-c-menu-toggle__status-icon--Color
(In light theme) #b1380b
.pf-v6-c-menu-toggle.pf-m-split-button--pf-v6-c-menu-toggle--ColumnGap
0
.pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check--pf-v6-c-menu-toggle--PaddingInlineEnd
0
.pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check--pf-v6-c-check__label--Color
currentcolor
.pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check--pf-v6-c-check__label--disabled--Color
currentcolor
.pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input--pf-v6-c-check__input--TranslateY
0
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-plain--pf-v6-c-menu-toggle--BorderColor
transparent
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor
transparent
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor
(In light theme) #c7c7c7
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):is(:hover, :focus)--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
(In light theme) #004d99
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
(In light theme) #004d99
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor
(In light theme) #0066cc
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action:is(.pf-m-disabled, :disabled)--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor
(In light theme) #4d4d4d
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action > :is(.pf-m-disabled, :disabled)--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor
(In light theme) #4d4d4d
.pf-v6-c-menu-toggle.pf-m-typeahead--pf-v6-c-menu-toggle__button--AlignSelf
stretch
.pf-v6-c-menu-toggle.pf-m-typeahead--pf-v6-c-menu-toggle--ColumnGap
0
.pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button--pf-v6-c-menu-toggle__button--PaddingInlineEnd
0
.pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls--pf-v6-c-menu-toggle__button--PaddingInlineEnd
0
.pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group--pf-v6-c-text-input-group__utilities--MarginInlineEnd
0

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