Menu toggle

The menu toggle component pairs with the menu OR the panel component to create more customizable dropdown and select implementations. Using a menu toggle with a menu enables you to create custom component configurations not supported by the standard dropdown or select components.

Accessibility

To implement an accessible PatternFly menu toggle component:

Due to the composable nature of the menu and menu toggle components, keyboard interaction will need to be added manually between the menu toggle and the menu. See the custom menus demos to see how this is done.
When adding an action to the menu toggle, an aria-label will need to be added to the MenuToggleAction or the MenuToggleCheckbox to communicate to users what this action will do.
When adding any additional elements to the menu toggle, remember to follow that element's specific considerations. For example, if you are adding an avatar to the menu toggle, you will need to provide an alt attribute with a description of the image.

Testing

At a minimum, a menu toggle component should meet the following criteria:

Users should be able to use keyboard navigation to activate the menu toggle with Enter or Space to enter a menu.Tab navigates to the menu and Shift + Tab navigates to the previous focusable element. Refer to our menu accessibility documentation for more implementation details when using these components together.
If there is not text within the menu toggle, such as a kebab menu toggle, an aria-label is used on the MenuToggle.This will communicate what the menu toggle is to users of assistive technologies when navigating through a page or a screen reader's rotor menu.
Any action used within a menu toggle has an aria-label.This will differentiate each action when announced to users of assistive technologies when navigating through a page or a screen reader's rotor menu.

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Prop	Applied to	Reason
`aria-label="[text that labels the menu toggle]"`	`MenuToggle`	Adds an accessible name to the menu toggle. Required when there is no text displayed in the menu toggle.
`icon={[custom icon]}`	`MenuToggle`	Adds an optional icon rendered inside the toggle, before the children content. Add `aria-hidden` to the icon to hide the decorative item from screen reader elements.
`aria-label="[text that labels the action]"`	`MenuToggleAction`	Adds an accessible name to the menu toggle action when the action is represented by an icon and no text.
`aria-label="[text that labels the checkbox]"`	`MenuToggleCheckbox`	Adds an accessible name to the checkbox item on the menu toggle when there is no associated visible label text.

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or Class	Applied to	Reason
`aria-expanded="true or false"`	`.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button`	Indicates that the menu toggle component is in the expanded or collapsed state.
`aria-label="[text that labels the menu toggle]"`	`.pf-v5-c-menu-toggle`	An accessible label for the menu toggle when there is no visible text within the toggle. Required when using a `pf-m-plain` with no text.
`aria-hidden="true"`	`.pf-v5-c-menu-toggle__toggle-icon`	Makes the decorative icon on the toggle hidden from screen reader users. Required when the toggle contains only an icon

View source on GitHub