Skip to content

Menu toggle

A menu toggle is a selectable control that opens and closes a menu.

Examples

Collapsed

Expanded

Disabled

Count

 

Primary

     

Secondary

     

Plain

   

Plain with text

   

Small

   

   

   

   

   

With icon/image and text

 

With avatar and text

   

Full height

Full width

Typeahead

Status





Placeholder

Split toggle

Shown with default, primary, and secondary styling

 
 


 
 


 
 

Split toggle with checkbox

Shown with default, primary, and secondary styling

 
 


 
 


 
 

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.

Shown with default, primary, and secondary styling

 
 


 
 


 
 

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.

Shown with default, primary, and secondary styling

 
 


 
 


 
 

Split toggle with checkbox, icon, 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.

Shown with default, primary, and secondary styling

 
 


 
 


 
 

Settings

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-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
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--Gap
0.5rem
  • --pf-v6-c-menu-toggle--Gap
  • --pf-t--global--spacer--gap--text-to-element--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--PaddingBlockStart
0.5rem
  • --pf-v6-c-menu-toggle--PaddingBlockStart
  • --pf-t--global--spacer--control--vertical--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--PaddingInlineEnd
1rem
  • --pf-v6-c-menu-toggle--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--PaddingBlockEnd
0.5rem
  • --pf-v6-c-menu-toggle--PaddingBlockEnd
  • --pf-t--global--spacer--control--vertical--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--PaddingInlineStart
1rem
  • --pf-v6-c-menu-toggle--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--MinWidth
calc(0.875rem * 1.5 + 0.5rem + 0.5rem)
  • --pf-v6-c-menu-toggle--MinWidth
  • calc(--pf-v6-c-menu-toggle--FontSize * --pf-v6-c-menu-toggle--LineHeight + --pf-v6-c-menu-toggle--PaddingBlockStart + --pf-v6-c-menu-toggle--PaddingBlockEnd)
  • calc(--pf-t--global--font--size--body--default * --pf-t--global--font--line-height--body + --pf-t--global--spacer--control--vertical--default + --pf-t--global--spacer--control--vertical--default)
  • calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--200 + --pf-t--global--spacer--sm + --pf-t--global--spacer--sm)
  • calc(--pf-t--global--font--size--200 * 1.5 + --pf-t--global--spacer--200 + --pf-t--global--spacer--200)
  • calc(0.875rem * 1.5 + 0.5rem + 0.5rem)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--FontSize
0.875rem
  • --pf-v6-c-menu-toggle--FontSize
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--Color
(In light theme) #151515
  • --pf-v6-c-menu-toggle--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--LineHeight
1.5
  • --pf-v6-c-menu-toggle--LineHeight
  • --pf-t--global--font--line-height--body
  • --pf-t--global--font--line-height--200
  • 1.5
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--BorderRadius
6px
  • --pf-v6-c-menu-toggle--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--BorderColor
(In light theme) #c7c7c7
  • --pf-v6-c-menu-toggle--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--BorderWidth
1px
  • --pf-v6-c-menu-toggle--BorderWidth
  • --pf-t--global--border--width--action--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--border--ZIndex
100
  • --pf-v6-c-menu-toggle--border--ZIndex
  • --pf-t--global--z-index--xs
  • --pf-t--global--z-index--100
  • 100
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
  • --pf-v6-c-menu-toggle--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--default
  • --pf-t--global--timing-function--200
  • cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--TransitionDuration
100ms
  • --pf-v6-c-menu-toggle--TransitionDuration
  • --pf-t--global--motion--duration--fade--short
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--TransitionProperty
color, background-color, border-width, border-color
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--hover--Color
(In light theme) #151515
  • --pf-v6-c-menu-toggle--hover--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--hover--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle--hover--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--hover--BorderWidth
1px
  • --pf-v6-c-menu-toggle--hover--BorderWidth
  • --pf-t--global--border--width--action--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--hover--BorderColor
(In light theme) #4394e5
  • --pf-v6-c-menu-toggle--hover--BorderColor
  • --pf-t--global--border--color--hover
  • --pf-t--global--color--brand--100
  • --pf-t--color--blue--40
  • #4394e5
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--hover__toggle-icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-menu-toggle--hover__toggle-icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--expanded--Color
(In light theme) #151515
  • --pf-v6-c-menu-toggle--expanded--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--expanded--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle--expanded--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--expanded--BorderWidth
2px
  • --pf-v6-c-menu-toggle--expanded--BorderWidth
  • --pf-t--global--border--width--action--clicked
  • --pf-t--global--border--width--200
  • 2px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--expanded--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle--expanded--BorderColor
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--expanded__toggle-icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-menu-toggle--expanded__toggle-icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--disabled--Color
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle--disabled--Color
  • --pf-t--global--text--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--disabled__icon--Color
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle--disabled__icon--Color
  • --pf-t--global--icon--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--disabled__toggle-icon--Color
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle--disabled__toggle-icon--Color
  • --pf-t--global--icon--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--disabled__status-icon--Color
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle--disabled__status-icon--Color
  • --pf-t--global--icon--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--disabled--BackgroundColor
(In light theme) #c7c7c7
  • --pf-v6-c-menu-toggle--disabled--BackgroundColor
  • --pf-t--global--background--color--disabled--default
  • --pf-t--global--color--disabled--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__icon--MinHeight
calc(0.875rem * 1.5)
  • --pf-v6-c-menu-toggle__icon--MinHeight
  • calc(--pf-v6-c-menu-toggle--FontSize * --pf-v6-c-menu-toggle--LineHeight)
  • calc(--pf-t--global--font--size--body--default * --pf-t--global--font--line-height--body)
  • calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--200)
  • calc(--pf-t--global--font--size--200 * 1.5)
  • calc(0.875rem * 1.5)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-menu-toggle__icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__icon--TransitionDelay
0s
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__icon--TransitionDuration
0s
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__icon--TransitionProperty
none
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--hover__icon--TransitionDelay
0s
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--hover__icon--TransitionDuration
0s
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--hover__icon--TransitionProperty
none
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__icon--Rotate
0deg
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--hover__icon--Rotate
0deg
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__toggle-icon--MinHeight
calc(0.875rem * 1.5)
  • --pf-v6-c-menu-toggle__toggle-icon--MinHeight
  • calc(--pf-v6-c-menu-toggle--FontSize * --pf-v6-c-menu-toggle--LineHeight)
  • calc(--pf-t--global--font--size--body--default * --pf-t--global--font--line-height--body)
  • calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--200)
  • calc(--pf-t--global--font--size--200 * 1.5)
  • calc(0.875rem * 1.5)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__toggle-icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-menu-toggle__toggle-icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart
1.5rem
  • --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--default
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd
1.5rem
  • --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--default
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--Color
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle--m-primary--Color
  • --pf-t--global--text--color--on-brand--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--BackgroundColor
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle--m-primary--BackgroundColor
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--BorderRadius
999px
  • --pf-v6-c-menu-toggle--m-primary--BorderRadius
  • --pf-t--global--border--radius--pill
  • --pf-t--global--border--radius--500
  • 999px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--BorderColor
transparent
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--hover--Color
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle--m-primary--hover--Color
  • --pf-t--global--text--color--on-brand--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--hover--BorderColor
transparent
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--expanded--Color
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle--m-primary--expanded--Color
  • --pf-t--global--text--color--on-brand--clicked
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor
transparent
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color
  • --pf-t--global--icon--color--on-brand--default
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color
  • --pf-t--global--icon--color--on-brand--hover
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color
  • --pf-t--global--icon--color--on-brand--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart
1rem
  • --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd
1rem
  • --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart
1.5rem
  • --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--default
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd
1.5rem
  • --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--default
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--BackgroundColor
transparent
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--Color
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle--m-secondary--Color
  • --pf-t--global--text--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle--m-secondary--BorderColor
  • --pf-t--global--border--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--BorderRadius
999px
  • --pf-v6-c-menu-toggle--m-secondary--BorderRadius
  • --pf-t--global--border--radius--pill
  • --pf-t--global--border--radius--500
  • 999px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--hover--Color
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-secondary--hover--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth
2px
  • --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth
  • --pf-t--global--border--width--action--hover
  • --pf-t--global--border--width--200
  • 2px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor
  • --pf-t--global--border--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--expanded--Color
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-secondary--expanded--Color
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor
transparent
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth
2px
  • --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth
  • --pf-t--global--border--width--action--clicked
  • --pf-t--global--border--width--200
  • 2px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor
  • --pf-t--global--border--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color
  • --pf-t--global--icon--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color
  • --pf-t--global--icon--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart
1rem
  • --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd
1rem
  • --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd
1.5rem
  • --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--spacious
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart
1.5rem
  • --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--spacious
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color
  • --pf-t--global--text--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor
(In light theme) #c7c7c7
  • --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor
  • --pf-t--global--background--color--disabled--default
  • --pf-t--global--color--disabled--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth
1px
  • --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth
  • --pf-t--global--border--width--action--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor
(In light theme) #c7c7c7
  • --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--child--BorderRadius
999px
  • --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius
  • --pf-t--global--border--radius--pill
  • --pf-t--global--border--radius--500
  • 999px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor
  • --pf-t--global--icon--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset
1rem
  • --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset
1rem
  • --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset
0.5rem
  • --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset
0.5rem
  • --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor
(In light theme) #c7c7c7
  • --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__button--BackgroundColor
transparent
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__button--Gap
0.5rem
  • --pf-v6-c-menu-toggle__button--Gap
  • --pf-t--global--spacer--gap--text-to-element--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__button--AlignSelf
baseline
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__button--PaddingInlineStart
0.5rem
  • --pf-v6-c-menu-toggle__button--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--plain
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__button--PaddingInlineEnd
0.5rem
  • --pf-v6-c-menu-toggle__button--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--plain
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__button--MinWidth
calc(0.875rem * 1.5 + 0.5rem + 0.5rem)
  • --pf-v6-c-menu-toggle__button--MinWidth
  • calc(--pf-v6-c-menu-toggle--FontSize * --pf-v6-c-menu-toggle--LineHeight + --pf-v6-c-menu-toggle--PaddingBlockStart + --pf-v6-c-menu-toggle--PaddingBlockEnd)
  • calc(--pf-t--global--font--size--body--default * --pf-t--global--font--line-height--body + --pf-t--global--spacer--control--vertical--default + --pf-t--global--spacer--control--vertical--default)
  • calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--200 + --pf-t--global--spacer--sm + --pf-t--global--spacer--sm)
  • calc(--pf-t--global--font--size--200 * 1.5 + --pf-t--global--spacer--200 + --pf-t--global--spacer--200)
  • calc(0.875rem * 1.5 + 0.5rem + 0.5rem)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart
0.5rem
  • --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart
1rem
  • --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd
1rem
  • --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart
0.5rem
  • --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd
0.5rem
  • --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart
0.5rem
  • --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd
0.5rem
  • --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--Color
(In light theme) #1f1f1f
  • --pf-v6-c-menu-toggle--m-plain--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
  • --pf-v6-c-menu-toggle--m-plain--BackgroundColor
  • --pf-t--global--background--color--action--plain--default
  • rgba(255, 255, 255, 0.0000)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--BorderColor
transparent
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--BorderRadius
6px
  • --pf-v6-c-menu-toggle--m-plain--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
  • --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor
  • --pf-t--global--background--color--action--plain--hover
  • --pf-t--global--background--color--600
  • rgba(199, 199, 199, 0.2500)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
  • --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor
  • --pf-t--global--background--color--action--plain--clicked
  • --pf-t--global--background--color--600
  • rgba(199, 199, 199, 0.2500)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--disabled--Color
(In light theme) #a3a3a3
  • --pf-v6-c-menu-toggle--m-plain--disabled--Color
  • --pf-t--global--text--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color
(In light theme) #a3a3a3
  • --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color
  • --pf-t--global--icon--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color
(In light theme) #a3a3a3
  • --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color
  • --pf-t--global--icon--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor
transparent
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart
0.25rem
  • --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd
0.25rem
  • --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf
stretch
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-small--PaddingBlockStart
0.25rem
  • --pf-v6-c-menu-toggle--m-small--PaddingBlockStart
  • --pf-t--global--spacer--control--vertical--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd
0.25rem
  • --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd
  • --pf-t--global--spacer--control--vertical--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-small--PaddingInlineStart
0.5rem
  • --pf-v6-c-menu-toggle--m-small--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd
0.5rem
  • --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__status-icon--Color
(In light theme) #1f1f1f
  • --pf-v6-c-menu-toggle__status-icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity
100ms
  • --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity
  • --pf-t--global--motion--duration--icon--default
  • --pf-t--global--motion--duration--sm
  • --pf-t--global--duration--100
  • 100ms
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity
cubic-bezier(.4, 0, .2, 1)
  • --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity
  • --pf-t--global--motion--timing-function--default
  • --pf-t--global--timing-function--200
  • cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-success--BorderColor
(In light theme) #3d7317
  • --pf-v6-c-menu-toggle--m-success--BorderColor
  • --pf-t--global--border--color--status--success--default
  • --pf-t--global--color--status--success--default
  • --pf-t--global--color--status--success--100
  • --pf-t--color--green--60
  • #3d7317
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-success__status-icon--Color
(In light theme) #3d7317
  • --pf-v6-c-menu-toggle--m-success__status-icon--Color
  • --pf-t--global--icon--color--status--success--default
  • --pf-t--global--color--status--success--default
  • --pf-t--global--color--status--success--100
  • --pf-t--color--green--60
  • #3d7317
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-warning--BorderColor
(In light theme) #dca614
  • --pf-v6-c-menu-toggle--m-warning--BorderColor
  • --pf-t--global--border--color--status--warning--default
  • --pf-t--global--color--status--warning--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-warning__status-icon--Color
(In light theme) #dca614
  • --pf-v6-c-menu-toggle--m-warning__status-icon--Color
  • --pf-t--global--icon--color--status--warning--default
  • --pf-t--global--color--status--warning--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-danger--BorderColor
(In light theme) #b1380b
  • --pf-v6-c-menu-toggle--m-danger--BorderColor
  • --pf-t--global--border--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-danger__status-icon--Color
(In light theme) #b1380b
  • --pf-v6-c-menu-toggle--m-danger__status-icon--Color
  • --pf-t--global--icon--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform
200ms
  • --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform
  • --pf-t--global--motion--duration--fade--default
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform
cubic-bezier(.4, 0, .2, 1)
  • --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform
  • --pf-t--global--motion--timing-function--default
  • --pf-t--global--timing-function--200
  • cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-placeholder--Color
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle--m-placeholder--Color
  • --pf-t--global--text--color--placeholder
  • --pf-t--global--text--color--subtle
  • --pf-t--global--text--color--200
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle__controls--Gap
0.5rem
  • --pf-v6-c-menu-toggle__controls--Gap
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration
200ms
  • --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration
  • --pf-t--global--motion--duration--icon--long
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction
cubic-bezier(.4, 0, .7, .2)
  • --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--accelerate
  • --pf-t--global--timing-function--100
  • cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration
200ms
  • --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration
  • --pf-t--global--motion--duration--icon--long
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction
cubic-bezier(0, 0, .2, 1)
  • --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--decelerate
  • --pf-t--global--timing-function--300
  • cubic-bezier(0, 0, .2, 1)
.pf-v6-c-menu-toggle--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate
60deg
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--PaddingInlineStart
1.5rem
  • --pf-v6-c-menu-toggle--PaddingInlineStart
  • --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--default
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--PaddingInlineEnd
1.5rem
  • --pf-v6-c-menu-toggle--PaddingInlineEnd
  • --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--default
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 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--Color
  • --pf-v6-c-menu-toggle--m-primary--Color
  • --pf-t--global--text--color--on-brand--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--BackgroundColor
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle--BackgroundColor
  • --pf-v6-c-menu-toggle--m-primary--BackgroundColor
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--BorderRadius
999px
  • --pf-v6-c-menu-toggle--BorderRadius
  • --pf-v6-c-menu-toggle--m-primary--BorderRadius
  • --pf-t--global--border--radius--pill
  • --pf-t--global--border--radius--500
  • 999px
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--BorderColor
transparent
  • --pf-v6-c-menu-toggle--BorderColor
  • --pf-v6-c-menu-toggle--m-primary--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--hover--Color
  • --pf-v6-c-menu-toggle--m-primary--hover--Color
  • --pf-t--global--text--color--on-brand--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #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--hover--BackgroundColor
  • --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--hover--BorderColor
transparent
  • --pf-v6-c-menu-toggle--hover--BorderColor
  • --pf-v6-c-menu-toggle--m-primary--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--expanded--Color
  • --pf-v6-c-menu-toggle--m-primary--expanded--Color
  • --pf-t--global--text--color--on-brand--clicked
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #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--expanded--BackgroundColor
  • --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--expanded--BorderColor
transparent
  • --pf-v6-c-menu-toggle--expanded--BorderColor
  • --pf-v6-c-menu-toggle--m-primary--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--hover__toggle-icon--Color
  • --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color
  • --pf-t--global--icon--color--on-brand--hover
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #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--expanded__toggle-icon--Color
  • --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color
  • --pf-t--global--icon--color--on-brand--clicked
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle__toggle-icon--Color
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle__toggle-icon--Color
  • --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color
  • --pf-t--global--icon--color--on-brand--default
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--m-small--PaddingInlineStart
1rem
  • --pf-v6-c-menu-toggle--m-small--PaddingInlineStart
  • --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle.pf-m-primary--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd
1rem
  • --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd
  • --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--PaddingInlineStart
1.5rem
  • --pf-v6-c-menu-toggle--PaddingInlineStart
  • --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--default
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--PaddingInlineEnd
1.5rem
  • --pf-v6-c-menu-toggle--PaddingInlineEnd
  • --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--default
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 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--Color
  • --pf-v6-c-menu-toggle--m-secondary--Color
  • --pf-t--global--text--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--BackgroundColor
transparent
  • --pf-v6-c-menu-toggle--BackgroundColor
  • --pf-v6-c-menu-toggle--m-secondary--BackgroundColor
  • transparent
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle--BorderColor
  • --pf-v6-c-menu-toggle--m-secondary--BorderColor
  • --pf-t--global--border--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--BorderRadius
999px
  • --pf-v6-c-menu-toggle--BorderRadius
  • --pf-v6-c-menu-toggle--m-secondary--BorderRadius
  • --pf-t--global--border--radius--pill
  • --pf-t--global--border--radius--500
  • 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--hover--Color
  • --pf-v6-c-menu-toggle--m-secondary--hover--Color
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--hover--BorderWidth
2px
  • --pf-v6-c-menu-toggle--hover--BorderWidth
  • --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth
  • --pf-t--global--border--width--action--hover
  • --pf-t--global--border--width--200
  • 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--hover--BorderColor
  • --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor
  • --pf-t--global--border--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #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--expanded--Color
  • --pf-v6-c-menu-toggle--m-secondary--expanded--Color
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--expanded--BackgroundColor
transparent
  • --pf-v6-c-menu-toggle--expanded--BackgroundColor
  • --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor
  • transparent
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--expanded--BorderWidth
2px
  • --pf-v6-c-menu-toggle--expanded--BorderWidth
  • --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth
  • --pf-t--global--border--width--action--clicked
  • --pf-t--global--border--width--200
  • 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--hover__toggle-icon--Color
  • --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color
  • --pf-t--global--icon--color--brand--hover
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #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--expanded__toggle-icon--Color
  • --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color
  • --pf-t--global--icon--color--brand--clicked
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle__toggle-icon--Color
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle__toggle-icon--Color
  • --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--m-small--PaddingInlineStart
1rem
  • --pf-v6-c-menu-toggle--m-small--PaddingInlineStart
  • --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle.pf-m-secondary--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd
1rem
  • --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd
  • --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--compact
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-menu-toggle.pf-m-full-height--pf-v6-c-menu-toggle--PaddingInlineEnd
1.5rem
  • --pf-v6-c-menu-toggle--PaddingInlineEnd
  • --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--spacious
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-menu-toggle.pf-m-full-height--pf-v6-c-menu-toggle--PaddingInlineStart
1.5rem
  • --pf-v6-c-menu-toggle--PaddingInlineStart
  • --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--spacious
  • --pf-t--global--spacer--lg
  • --pf-t--global--spacer--400
  • 1.5rem
.pf-v6-c-menu-toggle.pf-m-full-height--pf-v6-c-menu-toggle--BorderBlockStartWidth
undefined
  • --pf-v6-c-menu-toggle--BorderBlockStartWidth
  • --pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth
  • undefined
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--PaddingInlineStart
0.5rem
  • --pf-v6-c-menu-toggle--PaddingInlineStart
  • --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--PaddingInlineEnd
0.5rem
  • --pf-v6-c-menu-toggle--PaddingInlineEnd
  • --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--default
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--Color
(In light theme) #1f1f1f
  • --pf-v6-c-menu-toggle--Color
  • --pf-v6-c-menu-toggle--m-plain--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #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--BackgroundColor
  • --pf-v6-c-menu-toggle--m-plain--BackgroundColor
  • --pf-t--global--background--color--action--plain--default
  • 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--BorderColor
  • --pf-v6-c-menu-toggle--m-plain--BorderColor
  • transparent
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--BorderRadius
6px
  • --pf-v6-c-menu-toggle--BorderRadius
  • --pf-v6-c-menu-toggle--m-plain--BorderRadius
  • --pf-t--global--border--radius--small
  • --pf-t--global--border--radius--200
  • 6px
.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--hover--BackgroundColor
  • --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor
  • --pf-t--global--background--color--action--plain--hover
  • --pf-t--global--background--color--600
  • 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--expanded--BackgroundColor
  • --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor
  • --pf-t--global--background--color--action--plain--clicked
  • --pf-t--global--background--color--600
  • 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--disabled--Color
  • --pf-v6-c-menu-toggle--m-plain--disabled--Color
  • --pf-t--global--text--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--disabled__icon--Color
(In light theme) #a3a3a3
  • --pf-v6-c-menu-toggle--disabled__icon--Color
  • --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color
  • --pf-t--global--icon--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--disabled__toggle-icon--Color
(In light theme) #a3a3a3
  • --pf-v6-c-menu-toggle--disabled__toggle-icon--Color
  • --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color
  • --pf-t--global--icon--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--disabled--BackgroundColor
transparent
  • --pf-v6-c-menu-toggle--disabled--BackgroundColor
  • --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor
  • transparent
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--m-small--PaddingInlineStart
0.25rem
  • --pf-v6-c-menu-toggle--m-small--PaddingInlineStart
  • --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-menu-toggle.pf-m-plain--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd
0.25rem
  • --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd
  • --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--action--horizontal--plain--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle--Color
(In light theme) #151515
  • --pf-v6-c-menu-toggle--Color
  • --pf-v6-c-menu-toggle--hover--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle--BackgroundColor
(In light theme) #ffffff
  • --pf-v6-c-menu-toggle--BackgroundColor
  • --pf-v6-c-menu-toggle--hover--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle--BorderWidth
1px
  • --pf-v6-c-menu-toggle--BorderWidth
  • --pf-v6-c-menu-toggle--hover--BorderWidth
  • --pf-t--global--border--width--action--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle--BorderColor
(In light theme) #4394e5
  • --pf-v6-c-menu-toggle--BorderColor
  • --pf-v6-c-menu-toggle--hover--BorderColor
  • --pf-t--global--border--color--hover
  • --pf-t--global--color--brand--100
  • --pf-t--color--blue--40
  • #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__toggle-icon--Color
  • --pf-v6-c-menu-toggle--hover__toggle-icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle__icon--TransitionDelay
0s
  • --pf-v6-c-menu-toggle__icon--TransitionDelay
  • --pf-v6-c-menu-toggle--hover__icon--TransitionDelay
  • 0s
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle__icon--TransitionDuration
0s
  • --pf-v6-c-menu-toggle__icon--TransitionDuration
  • --pf-v6-c-menu-toggle--hover__icon--TransitionDuration
  • 0s
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle__icon--TransitionProperty
none
  • --pf-v6-c-menu-toggle__icon--TransitionProperty
  • --pf-v6-c-menu-toggle--hover__icon--TransitionProperty
  • none
.pf-v6-c-menu-toggle:is(:hover, :focus)--pf-v6-c-menu-toggle__icon--Rotate
0deg
  • --pf-v6-c-menu-toggle__icon--Rotate
  • --pf-v6-c-menu-toggle--hover__icon--Rotate
  • 0deg
.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--Color
  • --pf-v6-c-menu-toggle--expanded--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #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--BackgroundColor
  • --pf-v6-c-menu-toggle--expanded--BackgroundColor
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--100
  • --pf-t--color--white
  • #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--BorderWidth
  • --pf-v6-c-menu-toggle--expanded--BorderWidth
  • --pf-t--global--border--width--action--clicked
  • --pf-t--global--border--width--200
  • 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--BorderColor
  • --pf-v6-c-menu-toggle--expanded--BorderColor
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #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__toggle-icon--Color
  • --pf-v6-c-menu-toggle--expanded__toggle-icon--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle--PaddingBlockStart
0.25rem
  • --pf-v6-c-menu-toggle--PaddingBlockStart
  • --pf-v6-c-menu-toggle--m-small--PaddingBlockStart
  • --pf-t--global--spacer--control--vertical--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle--PaddingBlockEnd
0.25rem
  • --pf-v6-c-menu-toggle--PaddingBlockEnd
  • --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd
  • --pf-t--global--spacer--control--vertical--compact
  • --pf-t--global--spacer--xs
  • --pf-t--global--spacer--100
  • 0.25rem
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle--PaddingInlineStart
0.5rem
  • --pf-v6-c-menu-toggle--PaddingInlineStart
  • --pf-v6-c-menu-toggle--m-small--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle--PaddingInlineEnd
0.5rem
  • --pf-v6-c-menu-toggle--PaddingInlineEnd
  • --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart
0.5rem
  • --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart
  • --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd
0.5rem
  • --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd
  • --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset
0.5rem
  • --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset
  • --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-menu-toggle.pf-m-small--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset
0.5rem
  • --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset
  • --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset
  • --pf-t--global--spacer--control--horizontal--compact
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 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--BorderColor
  • --pf-v6-c-menu-toggle--m-success--BorderColor
  • --pf-t--global--border--color--status--success--default
  • --pf-t--global--color--status--success--default
  • --pf-t--global--color--status--success--100
  • --pf-t--color--green--60
  • #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__status-icon--Color
  • --pf-v6-c-menu-toggle--m-success__status-icon--Color
  • --pf-t--global--icon--color--status--success--default
  • --pf-t--global--color--status--success--default
  • --pf-t--global--color--status--success--100
  • --pf-t--color--green--60
  • #3d7317
.pf-v6-c-menu-toggle.pf-m-warning--pf-v6-c-menu-toggle--BorderColor
(In light theme) #dca614
  • --pf-v6-c-menu-toggle--BorderColor
  • --pf-v6-c-menu-toggle--m-warning--BorderColor
  • --pf-t--global--border--color--status--warning--default
  • --pf-t--global--color--status--warning--200
  • --pf-t--color--yellow--40
  • #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__status-icon--Color
  • --pf-v6-c-menu-toggle--m-warning__status-icon--Color
  • --pf-t--global--icon--color--status--warning--default
  • --pf-t--global--color--status--warning--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-menu-toggle.pf-m-danger--pf-v6-c-menu-toggle--BorderColor
(In light theme) #b1380b
  • --pf-v6-c-menu-toggle--BorderColor
  • --pf-v6-c-menu-toggle--m-danger--BorderColor
  • --pf-t--global--border--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #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__status-icon--Color
  • --pf-v6-c-menu-toggle--m-danger__status-icon--Color
  • --pf-t--global--icon--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-menu-toggle.pf-m-settings--pf-v6-c-menu-toggle__icon--TransitionProperty
rotate
.pf-v6-c-menu-toggle.pf-m-settings--pf-v6-c-menu-toggle__icon--TransitionDuration
200ms
  • --pf-v6-c-menu-toggle__icon--TransitionDuration
  • --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration
  • --pf-t--global--motion--duration--icon--long
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-menu-toggle.pf-m-settings--pf-v6-c-menu-toggle__icon--TransitionTimingFunction
cubic-bezier(.4, 0, .7, .2)
  • --pf-v6-c-menu-toggle__icon--TransitionTimingFunction
  • --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--accelerate
  • --pf-t--global--timing-function--100
  • cubic-bezier(.4, 0, .7, .2)
.pf-v6-c-menu-toggle.pf-m-settings--pf-v6-c-menu-toggle--hover__icon--TransitionProperty
rotate
.pf-v6-c-menu-toggle.pf-m-settings--pf-v6-c-menu-toggle--hover__icon--TransitionDuration
200ms
  • --pf-v6-c-menu-toggle--hover__icon--TransitionDuration
  • --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration
  • --pf-t--global--motion--duration--icon--long
  • --pf-t--global--motion--duration--md
  • --pf-t--global--duration--200
  • 200ms
.pf-v6-c-menu-toggle.pf-m-settings--pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction
cubic-bezier(0, 0, .2, 1)
  • --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction
  • --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction
  • --pf-t--global--motion--timing-function--decelerate
  • --pf-t--global--timing-function--300
  • cubic-bezier(0, 0, .2, 1)
.pf-v6-c-menu-toggle.pf-m-settings--pf-v6-c-menu-toggle--hover__icon--Rotate
60deg
  • --pf-v6-c-menu-toggle--hover__icon--Rotate
  • --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate
  • 60deg
.pf-v6-c-menu-toggle.pf-m-placeholder--pf-v6-c-menu-toggle--Color
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle--Color
  • --pf-v6-c-menu-toggle--m-placeholder--Color
  • --pf-t--global--text--color--placeholder
  • --pf-t--global--text--color--subtle
  • --pf-t--global--text--color--200
  • --pf-t--color--gray--60
  • #4d4d4d
.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--Color
  • --pf-v6-c-menu-toggle--disabled--Color
  • --pf-t--global--text--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)--pf-v6-c-menu-toggle__icon--Color
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle__icon--Color
  • --pf-v6-c-menu-toggle--disabled__icon--Color
  • --pf-t--global--icon--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)--pf-v6-c-menu-toggle__toggle-icon--Color
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle__toggle-icon--Color
  • --pf-v6-c-menu-toggle--disabled__toggle-icon--Color
  • --pf-t--global--icon--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)--pf-v6-c-menu-toggle__status-icon--Color
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle__status-icon--Color
  • --pf-v6-c-menu-toggle--disabled__status-icon--Color
  • --pf-t--global--icon--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #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--BackgroundColor
  • --pf-v6-c-menu-toggle--disabled--BackgroundColor
  • --pf-t--global--background--color--disabled--default
  • --pf-t--global--color--disabled--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-menu-toggle.pf-m-split-button--pf-v6-c-menu-toggle--Gap
0
.pf-v6-c-menu-toggle.pf-m-split-button--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor
transparent
  • --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor
  • --pf-v6-c-menu-toggle--BorderColor
  • transparent
.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-primary--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor
(In light theme) #c7c7c7
  • --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor
  • --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus)--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor
  • --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor
(In light theme) #004d99
  • --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor
  • --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--300
  • --pf-t--color--blue--60
  • #004d99
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor
(In light theme) #0066cc
  • --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor
  • --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor
(In light theme) #4d4d4d
  • --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor
  • --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor
  • --pf-t--global--icon--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-menu-toggle.pf-m-typeahead--pf-v6-c-menu-toggle__button--AlignSelf
stretch
  • --pf-v6-c-menu-toggle__button--AlignSelf
  • --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf
  • stretch
.pf-v6-c-menu-toggle.pf-m-typeahead--pf-v6-c-menu-toggle--Gap
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

Edit this page on GitHub
Red Hat
Copyright © 2014-2025 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines