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
Accessibility
| Class | Applied to | Outcome |
|---|---|---|
aria-expanded="true" | .pf-c-menu-toggle | Indicates that the menu toggle component is in the expanded state. |
aria-expanded="false" | .pf-c-menu-toggle | Indicates that the menu toggle component is in the collapsed state. |
aria-label="Descriptive text" | .pf-c-menu-toggle.pf-m-plain | Gives the plain menu toggle component an accessible label. |
disabled | .pf-c-menu-toggle | Indicates that the menu toggle component is disabled. |
Usage
| Class | Applied | Outcome |
|---|---|---|
.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-toggle | Modifies the menu toggle component for the primary variation. |
.pf-m-plain | .pf-c-menu-toggle | Modifies the menu toggle component for the plain variation. |
.pf-m-expanded | .pf-c-menu-toggle | Modifies the menu toggle component for the expanded state. |
CSS variables
View source on Github