--- id: 'Menu toggle' beta: true section: components cssPrefix: pf-c-menu-toggle ---import './MenuToggle.css' ## Examples ### Collapsed ```html ``` ### Expanded ```html ``` ### Disabled ```html ``` ### Count ```html ``` ### Primary ```html       ``` ### Secondary ```html       ``` ### Plain ```html     ``` ### Plain with text ```html   ``` ### Split button (checkbox) ```html
 
 
``` ### Split button (checkbox with toggle text) ```html
 
 
``` ### Split button, primary ```html
 
 
``` ### Split button, secondary ```html
 
 
``` ### Split button (action) ```html
 
 
``` ### Split button, primary (action) ```html
 
 
``` ### Split button, secondary (action) ```html
 
 
``` ### With icon/image and text ```html   ``` ### With avatar and text ```html     ``` ### Full height ```html ``` ### Typeahead ```html
``` ### Accessibility | Class | Applied to | Outcome | | ------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------- | | `aria-expanded="true"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. | | `aria-expanded="false"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | 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`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. | ### Usage | Class | Applied | Outcome | | -------------------------------- | ------------------------------------- | -------------------------------------------------------------------------- | | `.pf-c-menu-toggle` | `