--- id: 'Menu toggle' section: components subsection: menus cssPrefix: pf-v5-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 label) ```html ``` ### Split button (checkbox with toggle button 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 ``` ### Status ```html isBeta

``` ## Documentation ### Accessibility | Class | Applied to | Outcome | | -- | -- | -- | | `aria-expanded="true"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. | | `aria-expanded="false"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. | | `aria-label="Descriptive text"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle.pf-m-plain` | Gives the menu toggle component an accessible label. Used whenever there is no text visible in the menu toggle. Often, plain modifiers are used when the menu toggle only contains an icon. | | `disabled` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. | ### Usage | Class | Applied | Outcome | | -- | -- | -- | | `.pf-v5-c-menu-toggle` | `