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.

Examples

Collapsed

Expanded

Disabled

Icon

Count

Primary

Plain

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
variant'default' | 'plain' | 'primary'Variant styles of the menu toggle

CSS variables

.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--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-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__image--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__toggle-icon--MarginRight
0.5rem
.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-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-plain--pf-c-menu-toggle--Color
#6a6e73
.pf-c-menu-toggle.pf-m-plain--pf-c-menu-toggle--hover--Color
#151515
.pf-c-menu-toggle.pf-m-plain--pf-c-menu-toggle--focus--Color
#151515
.pf-c-menu-toggle.pf-m-plain--pf-c-menu-toggle--active--Color
#151515
.pf-c-menu-toggle.pf-m-plain--pf-c-menu-toggle--disabled--Color
#d2d2d2
.pf-c-menu-toggle.pf-m-plain--pf-c-menu-toggle--PaddingRight
1rem
.pf-c-menu-toggle.pf-m-plain--pf-c-menu-toggle--PaddingLeft
1rem
.pf-c-menu-toggle.pf-m-plain--pf-c-menu-toggle--disabled--BackgroundColor
transparent
.pf-c-menu-toggle.pf-m-plain--pf-c-menu-toggle--m-expanded--Color
#151515
.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: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: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.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:disabled--pf-c-menu-toggle--Color
#6a6e73
.pf-c-menu-toggle:disabled--pf-c-menu-toggle--BackgroundColor
#f0f0f0
.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

View source on GitHub