import './MenuToggle.css'

## Examples

### Collapsed


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Expanded


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Disabled


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Count


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Primary


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Secondary


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Plain


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Plain with text


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Small


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### With icon/image and text


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### With avatar and text


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Full height


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Full width


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

### Typeahead


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

### Status


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

### Placeholder


import Example16 from './Example16.html?raw'

<LiveExample html={Example16} />

### Split toggle

Shown with default, primary, and secondary styling


import Example17 from './Example17.html?raw'

<LiveExample html={Example17} />

### Split toggle with checkbox

Shown with default, primary, and secondary styling


import Example18 from './Example18.html?raw'

<LiveExample html={Example18} />

### 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. <br/> <br/>
Shown with default, primary, and secondary styling


import Example19 from './Example19.html?raw'

<LiveExample html={Example19} />

### 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. <br/> <br/>
Shown with default, primary, and secondary styling


import Example20 from './Example20.html?raw'

<LiveExample html={Example20} />

### 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. <br/> <br/>
Shown with default, primary, and secondary styling


import Example21 from './Example21.html?raw'

<LiveExample html={Example21} />

## 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` | `<button>` | Initiates the menu toggle component. |
| `.pf-v6-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
| `.pf-v6-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
| `.pf-v6-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
| `.pf-v6-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
| `.pf-v6-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
| `.pf-v6-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
| `.pf-m-split-button` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
| `.pf-m-text` | `.pf-v6-c-menu-toggle__button` | Modifies the menu toggle component split button variation with text. |
| `.pf-m-disabled` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
| `.pf-m-primary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
| `.pf-m-secondary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
| `.pf-m-text` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
| `.pf-m-plain` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
| `.pf-m-expanded` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
| `.pf-m-full-height` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
| `.pf-m-full-width` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |
| `.pf-m-success` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the success state. |
| `.pf-m-warning` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
| `.pf-m-danger` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the danger state. |
| `.pf-m-placeholder` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle text for placeholder styles. |
| `.pf-m-avatar` | `.pf-v6-c-menu-toggle__icon` | Modifies the menu toggle icon for avatar styles. |