Skip to content
Patternfly Logo

Menu toggle

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

Examples

Collapsed

Expanded

Disabled

Count

Primary

Secondary

Plain

Plain with text

With icon/image and text

With avatar and text

Full height

Full width

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 rendered inside the toggle, before the children content
innerRefReact.Ref<HTMLButtonElement>Forwarded ref
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
variant'default' | 'plain' | 'primary' | 'plainText' | 'secondary'Variant styles of the menu toggle

CSS variables

.pf-c-menu-toggle--pf-c-menu-toggle--BorderRadius
0
.pf-c-menu-toggle--pf-c-menu-toggle--PaddingTop
0.375rem
.pf-c-menu-toggle--pf-c-menu-toggle--PaddingRight
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--PaddingBottom
0.375rem
.pf-c-menu-toggle--pf-c-menu-toggle--PaddingLeft
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--FontSize
1rem
.pf-c-menu-toggle--pf-c-menu-toggle--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--LineHeight
1.5
.pf-c-menu-toggle--pf-c-menu-toggle--BackgroundColor
transparent
.pf-c-menu-toggle--pf-c-menu-toggle--before--BorderTopWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--before--BorderRightWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--before--BorderBottomWidth
0
.pf-c-menu-toggle--pf-c-menu-toggle--before--BorderLeftWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--before--BorderTopColor
#f0f0f0
.pf-c-menu-toggle--pf-c-menu-toggle--before--BorderRightColor
#f0f0f0
.pf-c-menu-toggle--pf-c-menu-toggle--before--BorderBottomColor
transparent
.pf-c-menu-toggle--pf-c-menu-toggle--before--BorderLeftColor
#f0f0f0
.pf-c-menu-toggle--pf-c-menu-toggle--after--BorderBottomWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--after--BorderBottomColor
#8a8d90
.pf-c-menu-toggle--pf-c-menu-toggle--hover--BackgroundColor
transparent
.pf-c-menu-toggle--pf-c-menu-toggle--hover--after--BorderBottomWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--hover--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--focus--BackgroundColor
transparent
.pf-c-menu-toggle--pf-c-menu-toggle--focus--after--BorderBottomWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--focus--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--active--BackgroundColor
transparent
.pf-c-menu-toggle--pf-c-menu-toggle--active--after--BorderBottomWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--active--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-expanded--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-expanded--BackgroundColor
transparent
.pf-c-menu-toggle--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-expanded--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--disabled--Color
#6a6e73
.pf-c-menu-toggle--pf-c-menu-toggle--disabled--BackgroundColor
#f0f0f0
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--Color
#fff
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--BorderRadius
3px
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--BackgroundColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--hover--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--focus--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--active--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-primary--m-expanded--Color
#fff
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--Color
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--BorderRadius
3px
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--BackgroundColor
transparent
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--before--BorderWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--active--before--BorderWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--hover--before--BorderColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--focus--before--BorderColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--active--before--BorderColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-secondary--m-expanded--Color
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--Color
#6a6e73
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--PaddingRight
1rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--PaddingLeft
1rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--hover--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--focus--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--active--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--disabled--Color
#d2d2d2
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--m-expanded--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle__icon--MarginRight
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle__count--MarginLeft
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle__controls--PaddingLeft
1rem
.pf-c-menu-toggle--pf-c-menu-toggle__controls--MarginLeft
auto
.pf-c-menu-toggle--pf-c-menu-toggle__controls--MarginRight
0
.pf-c-menu-toggle--pf-c-menu-toggle__toggle-icon--MarginRight
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain__toggle-icon--Color
#6a6e73
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--active__toggle-icon--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color
#151515
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height--PaddingRight
1.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height--PaddingLeft
1.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth
0
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth
4px
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth
4px
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth
4px
.pf-c-menu-toggle--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth
4px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--BackgroundColor
#fff
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--child--BackgroundColor
#fff
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--child--disabled--Color
#6a6e73
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor
#f0f0f0
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--first-child--PaddingRight
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--last-child--PaddingLeft
0
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
#f0f0f0
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--after--Left
0
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor
#8a8d90
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth
1px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth
2px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius
3px
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor
#004080
.pf-c-menu-toggle--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor
#06c
.pf-c-menu-toggle--pf-c-menu-toggle__button__controls--MarginRight
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle__button__controls--MarginLeft
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-typeahead__controls--MarginRight
1rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-typeahead__controls--MarginLeft
0.5rem
.pf-c-menu-toggle--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight
0.5rem
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--BorderRadius
3px
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--Color
#fff
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--BackgroundColor
#06c
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--hover--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--focus--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--active--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--m-expanded--Color
#fff
.pf-c-menu-toggle.pf-m-primary--pf-c-menu-toggle--m-expanded--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-secondary--pf-c-menu-toggle--Color
#06c
.pf-c-menu-toggle.pf-m-secondary--pf-c-menu-toggle--m-expanded--Color
#06c
.pf-c-menu-toggle.pf-m-secondary:hover--pf-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle.pf-m-secondary:hover--pf-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-c-menu-toggle.pf-m-secondary:focus--pf-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle.pf-m-secondary:focus--pf-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-c-menu-toggle.pf-m-secondary:active--pf-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle.pf-m-secondary:active--pf-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-c-menu-toggle.pf-m-secondary.pf-m-expanded--pf-c-menu-toggle--m-secondary--before--BorderColor
#06c
.pf-c-menu-toggle.pf-m-secondary.pf-m-expanded--pf-c-menu-toggle--m-secondary--before--BorderWidth
2px
.pf-c-menu-toggle.pf-m-plain--pf-c-menu-toggle__toggle-icon--Color
#6a6e73
.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text)--pf-c-menu-toggle--PaddingRight
1rem
.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text)--pf-c-menu-toggle--PaddingLeft
1rem
.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text)--pf-c-menu-toggle--disabled--BackgroundColor
transparent
.pf-c-menu-toggle:hover--pf-c-menu-toggle--BackgroundColor
transparent
.pf-c-menu-toggle:hover--pf-c-menu-toggle--after--BorderBottomWidth
1px
.pf-c-menu-toggle:hover--pf-c-menu-toggle--after--BorderBottomColor
#06c
.pf-c-menu-toggle:hover--pf-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-c-menu-toggle:hover--pf-c-menu-toggle--m-plain--Color
#151515
.pf-c-menu-toggle:focus--pf-c-menu-toggle--BackgroundColor
transparent
.pf-c-menu-toggle:focus--pf-c-menu-toggle--after--BorderBottomWidth
2px
.pf-c-menu-toggle:focus--pf-c-menu-toggle--after--BorderBottomColor
#06c
.pf-c-menu-toggle:focus--pf-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-c-menu-toggle:focus--pf-c-menu-toggle--m-plain--Color
#151515
.pf-c-menu-toggle:active--pf-c-menu-toggle--BackgroundColor
transparent
.pf-c-menu-toggle:active--pf-c-menu-toggle--after--BorderBottomWidth
2px
.pf-c-menu-toggle:active--pf-c-menu-toggle--after--BorderBottomColor
#06c
.pf-c-menu-toggle:active--pf-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-c-menu-toggle:active--pf-c-menu-toggle--m-plain--Color
#151515
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--Color
#151515
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--BackgroundColor
transparent
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--after--BorderBottomWidth
2px
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--after--BorderBottomColor
#06c
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--m-plain__toggle-icon--Color
#151515
.pf-c-menu-toggle.pf-m-expanded--pf-c-menu-toggle--m-plain--Color
#151515
.pf-c-menu-toggle:disabled--pf-c-menu-toggle--Color
#6a6e73
.pf-c-menu-toggle:disabled--pf-c-menu-toggle--BackgroundColor
#f0f0f0
.pf-c-menu-toggle:disabled--pf-c-menu-toggle--m-plain--Color
#d2d2d2
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--PaddingRight
1.5rem
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--PaddingLeft
1.5rem
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--before--BorderTopWidth
0
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth
4px
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--hover--after--BorderBottomWidth
4px
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--focus--after--BorderBottomWidth
4px
.pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--active--after--BorderBottomWidth
4px
.pf-c-menu-toggle.pf-m-typeahead--pf-c-menu-toggle__button__controls--MarginRight
1rem
.pf-c-menu-toggle.pf-m-typeahead--pf-c-menu-toggle__button__controls--MarginLeft
0.5rem
.pf-c-menu-toggle.pf-m-typeahead--pf-c-menu-toggle__toggle-icon--MarginRight
0
.pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group--pf-c-text-input-group__utilities--c-button--PaddingRight
0.5rem
.pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group--pf-c-text-input-group__utilities--MarginRight
0
.pf-c-menu-toggle.pf-m-split-button > .pf-c-check--pf-c-menu-toggle--PaddingRight
0
.pf-c-menu-toggle.pf-m-split-button > .pf-c-check--pf-c-check__input--MarginTop
0
.pf-c-menu-toggle.pf-m-split-button > .pf-c-check--pf-c-check__label--Color
currentColor
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth
1px
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor
#06c
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth
2px
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:focus--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor
#06c
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:active--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth
2px
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:active--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor
#06c
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
#004080
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth
0
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):hover--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):focus--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):active--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor
#004080
.pf-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
#06c
.pf-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child)--pf-c-menu-toggle--m-split-button--m-action--child--after--Left
calc(1px * -1)
.pf-c-menu-toggle.pf-m-split-button.pf-m-action:not(.pf-m-expanded)--pf-c-menu-toggle--after--BorderBottomColor
transparent
.pf-c-menu-toggle.pf-m-split-button.pf-m-disabled--pf-c-menu-toggle--m-split-button--child--BackgroundColor
#f0f0f0
.pf-c-menu-toggle.pf-m-split-button.pf-m-disabled--pf-c-menu-toggle--m-split-button--child--Color
#6a6e73
.pf-c-menu-toggle.pf-m-split-button.pf-m-disabled--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
transparent
.pf-c-menu-toggle.pf-m-split-button > .pf-m-disabled--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor
transparent
.pf-c-menu-toggle__button--pf-c-menu-toggle__controls--PaddingLeft
0
.pf-c-menu-toggle__button--pf-c-menu-toggle__controls--MarginRight
0.5rem
.pf-c-menu-toggle__button--pf-c-menu-toggle__controls--MarginLeft
0.5rem

View source on GitHub