PatternFly

Menu toggle

Examples

Collapsed toggle

A toggle is collapsed until it is selected by a user.

Expanded toggle

When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the isExpanded property .

Disabled toggle

To disable the selection and expansion of a toggle, use the isDisabled property.

With a badge

To display a count of selected items in a toggle, use the badge property.

With icons

To add a recognizable icon to a menu toggle, use the icon property. The following example adds a CogIcon to the toggle.

For most basic icons, it is recommended to wrap it inside our icon component.

With avatar and text

You can also pass images into the icon property. The following example passes in an <Avatar> component with an imgAvatar.

This can be used alongside a text label that provides more context for the image.

Variant styles

Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing variant="primary" into the <MenuToggle> component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.

Plain toggle with icon

To apply plain styling to a menu toggle with an icon, pass in variant="plain". This will remove the default bottom border and caret. You may pass in an icon to serve as the menu toggle. The following example passes in an EllipsisVIcon.

If the toggle does not have any visible text content, use the aria-label property to provide an accessible name.

Plain toggle with text label

To apply plain styling to a menu toggle with a text label, pass in variant="plainText". Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.

Split button toggle with checkbox

To add an action button or other control to a menu toggle, use a split button. A <MenuToggle> can be rendered as a split button by adding a splitButtonOptions object. Elements to be displayed before the toggle button must be included in the items property of splitButtonOptions.

The following example shows a split button with a <MenuToggleCheckbox>.

Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles.

Split button toggle with checkbox label

To display text in a split button menu toggle, add a label to the items property of splitButtonOptions.

Split button toggle with checkbox and toggle button text

For split button toggles that should still contain text which will trigger the toggle's onClick, pass children to the MenuToggle.

The following example shows a split button with a <MenuToggleCheckbox> and toggle button text.

Split button toggle with action

To add an action to a split button, pass variant='action' into splitButtonOptions and add a <MenuToggleAction> to the items property of splitButtonOptions.

Actions may be used with primary and secondary toggle variants.

Full height toggle

A full height toggle fills the height of its parent. To flag a full height toggle, use the isFullHeight property.

In the following example, the toggle fills the size of the "80px" <div> element that it is within.

Full width toggle

A full width toggle fills the width of its parent. To flag a full width toggle, use the isFullWidth property.

In the following example, the toggle fills the width of its parent as the window size changes.

Typeahead toggle

To create a typeahead toggle, pass in variant="typeahead" to the <MenuToggle>. Then, pass a <TextInputGroup> component as a child of the <MenuToggle>.

To create a multiple typeahead toggle, pass a <TextInputGroup> component implemented like the text input group's filter example as a child of <MenuToggle>.

Status toggle

To create a toggle with a status, pass in the status property to the MenuToggle. The default icon associated with each status may be overridden by using the statusIcon property.

When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.



Warning text that explains the issue.


Danger text that explains the issue.

Props

*required
NameTypeDefaultDescription
badgeBadgeProps | React.ReactNodeOptional badge rendered inside the toggle, after the children content
childrenReact.ReactNodeContent rendered inside the toggle
classNamestringAdditional classes added to the toggle
iconReact.ReactNodeOptional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component.
isDisabledbooleanFlag indicating the toggle is disabled
isExpandedbooleanFlag indicating the toggle has expanded styling
isFullHeightbooleanFlag indicating the toggle is full height
isFullWidthbooleanFlag indicating the toggle takes up the full width of its parent
splitButtonOptionsSplitButtonOptionsObject used to configure a split button menu toggle
statusBeta'success' | 'warning' | 'danger'Status styles of the menu toggle
statusIconReact.ReactNodeOverrides the status icon
variant'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead'Variant styles of the menu toggle
*required
NameTypeDefaultDescription
childrenReact.ReactNodeElement to be rendered inside the <button>
classNamestring''Additional classes added to the MenuToggleAction
idstringId of the action button
isDisabledbooleanfalseFlag to show if the action button is disabled
onClick(event: React.MouseEvent<HTMLButtonElement>) => void() => {}A callback for when the action button is clicked
*required
NameTypeDefaultDescription
idrequiredstringId of the checkbox
childrenReact.ReactNodeElement to be rendered inside the <span>
classNamestringAdditional classes added to the MenuToggleCheckbox
defaultCheckedboolean | nullFlag to set the default checked value of the checkbox when it is uncontrolled by React state. To make the checkbox controlled instead use the isChecked prop, but do not use both.
isCheckedboolean | nullFlag to show if the checkbox is checked when it is controlled by React state. To make the checkbox uncontrolled instead use the defaultChecked prop, but do not use both.
isDisabledbooleanfalseFlag to show if the checkbox is disabled
isValidbooleantrueFlag to show if the checkbox selection is valid or invalid
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void() => undefined as anyA callback for when the checkbox selection changes
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

SplitButtonOptions

*required
NameTypeDefaultDescription
itemsrequiredReact.ReactNode[]Elements to display before the toggle button. When included, renders the menu toggle as a split button.
variant'action' | 'checkbox'Variant of split button toggle

CSS variables

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