Menu button

Menu button triggers a list of actions for the user to select from.

Overview

The menu button displays a list of choices that appear when the user interacts with the button. Each menu item allows the user to choose a different action.

Anatomy

1. Button: Triggers the menu.
2. Menu: Contains the menu items that can be selected.

Demo

Open the component in Figma.

When to use

• You need to display multiple actions but there is a space constraint.

When not to use

• The user needs to make a selection in a form. Use a select, radio, or checkbox.

Similar components

Variants

Menu button variants

The menu button uses the same styles and properties as button but includes additional functions to trigger the menu.

Dropdown button

A dropdown button is styled just like other buttons (primary, secondary, floating) but it uses the trailing chevron down icon to indicate that there is additional content once toggled.

Icon button

The icon button uses the overflow vertical icon as the trigger.

Menu item variants

Icons

By default, a menu item has a text label that explains the action. An icon can also be included in front of the label to reinforce the label.

Grouping

Similar or related actions can be grouped within the menu by using a divider line, a section heading, or both.

Behaviors

Placement

Placement is done automatically. The menu is positioned under its anchor element. If there isn’t room in the viewport, it will position on top of the anchor element.

Scrolling

When a menu has enough menu items to require scrolling, the last item is 50% visible in the container so that it’s clear that there is more content available.

Closing the menu

When an action is selected from the menu list, the menu collapses and the action is performed.

Additionally, a user can click outside of the menu or press the esc key to collapse the menu.

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for menu button.

Content guidelines

Button label

• Be descriptive.
• Lead with a strong verb that encourages action.
• Use the verb + noun format.
• Use one to four words, with fewer than 30 characters including spaces.
• Avoid unnecessary articles and prepositions, such as the, an, a, or with.
• Don’t use punctuation marks such as periods or exclamation points.
• Write in sentence case (capitalize the first word and proper nouns only).

Menu section heading

• If appropriate, group related menu items with a heading for clarity and findability.
• There must be enough menu items to have at least two groups and each group must have at least two items.
• The label should capture what they have in common. This could be functionality or relationships.
• Don’t use end punctuation, including periods, commas, or semicolons.
• The heading is fully capitalized. For example, CREW.

Menu item labels

• The options users can select.
• Be concise; try to use fewer than 20 characters including spaces to avoid breaking the line.
• Be descriptive so users can quickly decide on an action.
• Be clear and predictable. Users should be able to anticipate what will happen when they click on an item.
• Each item in a menu should lead with a strong verb that encourages action. Use the verb + noun format unless the action is clear with a single verb.
• Avoiding unnecessary words and articles such as the, an, or a.
• Don’t use end punctuation, including periods, commas, or semicolons.
• Write in sentence case (capitalize the first word and proper nouns only).

Menu item order

• Order items in a logical, intentional way to help the user find a specific option:
  - Most used to least used
  - Recommended item first
  - Increasing order (smallest to largest)
  - Alphabetical order only if it makes sense for the menu items.
• Actions that could cause a significant change to the user’s data (delete app, delete service, etc.) should be placed last.
• Group list items into multiple categories if needed.

Content accessibility

Button label, menu section heading, and menu item labels

• Since the major elements of a menu button have text labels, ARIA tags will handle screen reader interactions. Additional content isn't necessary to ensure accessibility.

Icons

• If including icons, these elements will use their default labels to ensure accessibility.

Figma: Menu button