--- id: 'Menu toggle' section: components subsection: menus cssPrefix: pf-v6-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     ``` ### Small ```html    

   

   

   

    ``` ### With icon/image and text ```html   ``` ### With avatar and text ```html     ``` ### Full height ```html ``` ### Full width ```html ``` ### Typeahead ```html
``` ### Status ```html



``` ### Placeholder ```html ``` ### Split toggle Shown with default, primary, and secondary styling ```html
 
 


 
 


 
 
``` ### Split toggle with checkbox Shown with default, primary, and secondary styling ```html
 
 


 
 


 
 
``` ### Split toggle with labeled checkbox To add a label to a split toggle that will be linked to the checkbox, pass the text wrapped in `span.pf-v6-c-check__label` as a child to `label.pf-v6-c-check`. Clicking the text will update the checked state of the split toggle's checkbox.

Shown with default, primary, and secondary styling ```html
 
 


 
 


 
 
``` ### Split toggle with checkbox and toggle text To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in `span.pf-v6-c-menu-toggle__text` as a child to `button.pf-v6-c-menu-toggle__button.pf-m-text`. Clicking the text should trigger any click action on the toggle.

Shown with default, primary, and secondary styling ```html
 
 


 
 


 
 
``` ### Split toggle with checkbox, icon, and toggle text To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in `span.pf-v6-c-menu-toggle__text` as a child to `button.pf-v6-c-menu-toggle__button.pf-m-text`. Clicking the text should trigger any click action on the toggle.

Shown with default, primary, and secondary styling ```html
 
 


 
 


 
 
``` ### Settings ```html ``` ## Documentation ### Accessibility | Class | Applied to | Outcome | | -- | -- | -- | | `aria-expanded="true"` | `.pf-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. | | `aria-expanded="false"` | `.pf-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. | | `aria-label="Descriptive text"` | `.pf-v6-c-menu-toggle`, `.pf-v6-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-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. | ### Usage | Class | Applied | Outcome | | -- | -- | -- | | `.pf-v6-c-menu-toggle` | `