Menu

When to use

• Use the Menu component when there is a list of options from which the user needs to select one. For example, the Menu is ideal for selecting a country from a list in a form, choosing an option from a search field, selecting a page number from a paginator, or applying a filter from a list of options.
• Use the Menu component when you need to save space on the page. The Menu is a compact way to present a list of options without taking up too much space.

---

When not to use

• Do not use the Menu component for a small number of options. Instead, use radio buttons or checkboxes. These options are more accessible and easier to navigate for users, especially on mobile devices.
• Do not use the Menu component for long lists that require a lot of scrolling. For long lists, consider using a searchable dropdown or another type of control, like a search field.
• Do not use the Menu component if the order of options matters. Dropdown menus can make it hard for users to compare options, as they can only see one option at a time.

---

Behaviour

The Menu component operates by showcasing a control that, upon interaction, reveals a set of choices for the user to select from. The option picked by the user then gets displayed within the control. The Menu component can be designed to allow single selection.

---

Placement

The Menu component is typically placed under the Menu control, which in most cases is our Select component. This ensures that the user can clearly see the list of options when the Menu is activated. However, it's important to note that the Menu component will be shown above the control if there is insufficient space available under the control. This flexibility ensures optimal visibility and usability in all scenarios.

---

Accessibility considerations

• Cognitive load: Keep the text as simple and concise as possible to avoid overwhelming users. Additionally, limit the number of options in the dropdown to prevent cognitive overload.
• Alt text and ARIA labels: Include alt text for any images and icons in the Menu. Also use ARIA labels to provide additional information about the Menu and its options to assistive technologies.
• Font size: Stick to a minimum font size of 16px for easy reading.
• Not too many options: Menu should not have a large number of options as it can be overwhelming for users, especially those with cognitive disabilities.
• Keyboard control: The Menu component should be fully operable with a keyboard according to web standards. This includes being able to open the dropdown, navigate through the options, and select an option using keyboard keys.

Keyboard shortcuts