Patternfly Logo

Menu toggle

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Collapsed

Expanded

Disabled

Icon

Count

Primary

   

Plain

  

Accessibility

ClassApplied toOutcome
aria-expanded="true".pf-c-menu-toggleIndicates that the menu toggle component is in the expanded state.
aria-expanded="false".pf-c-menu-toggleIndicates that the menu toggle component is in the collapsed state.
aria-label="Descriptive text".pf-c-menu-toggle.pf-m-plainGives the plain menu toggle component an accessible label.
disabled.pf-c-menu-toggleIndicates that the menu toggle component is disabled.

Usage

ClassAppliedOutcome
.pf-c-menu-toggle<button>Initiates the menu toggle component.
.pf-c-menu-toggle__icon<span>Defines the menu toggle component icon.
.pf-c-menu-toggle__text<span>Defines the menu toggle component text.
.pf-c-menu-toggle__count<span>Defines the menu toggle component count.
.pf-c-menu-toggle__controls<span>Defines the menu toggle component controls.
.pf-c-menu-toggle__toggle-icon<span>Defines the menu toggle component toggle/arrow icon.
.pf-m-primary.pf-c-menu-toggleModifies the menu toggle component for the primary variation.
.pf-m-plain.pf-c-menu-toggleModifies the menu toggle component for the plain variation.
.pf-m-expanded.pf-c-menu-toggleModifies the menu toggle component for the expanded state.

CSS variables


View source on Github