Skip to content
PatternFly logo

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 composable menu 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:

  • 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.
  • 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.
  • 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 describing 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 describing 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 labeling 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-c-menu-toggle, .pf-c-menu-toggle__button
Indicates that the menu toggle component is in the expanded or collapsed state.
aria-label="[text describing the menu toggle]"
.pf-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-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