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
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__image | <span> | Defines the menu toggle component image. |
.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-secondary | .pf-c-menu-toggle | Modifies the menu toggle component for the secondary variation. |
.pf-m-text | .pf-c-menu-toggle | Modifies the menu toggle component for the text 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. |
.pf-m-full-height | .pf-c-menu-toggle | Modifies the menu toggle component to full height of parent. |
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