- React
- HTML

import ’./MenuToggle.css’

## Examples

### Collapsed

### Expanded

### Disabled

### Count

### Primary

### Secondary

### Plain

### Plain with text

### Small

### With icon/image and text

### With avatar and text

### Full height

### Full width

### Typeahead

### Status

### Placeholder

### Split toggle

Shown with default, primary, and secondary styling

### Split toggle with checkbox

Shown with default, primary, and secondary styling

### 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

### 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

### 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

## 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.

##
CSS variables