Menu dropdown

A menu dropdown expands to show a list of menu items, which are typically actions that a user can take.

Though they may be visually similar, understanding the difference between a menu dropdown and a select list is crucial for proper semantic implementation and accessibility.

An action in a menu dropdown performs a command, and its toggle functions like a button. It does not update a form field value, which would result in a change to what the toggle displays.

A select list is a form control that allows a user to choose one or more options as inputs. The value in a select list’s toggle does change to show a user’s selection(s).

Menu dropdowns can show actions or links. If possible, avoid mixing the two types.

The basic menu toggle is the default and clearly communicates the menu’s purpose. It is best used when:

• the contents of the dropdown are not easily inferred
• there is enough space to include text
• more than one toggle is present in a section

The compact menu toggle conserves space, but it does not include a visible label. This variant works well when:

• the menu dropdown is related to specific items, like cards or rows in a table
• there is limited space for a dropdown toggle

The content within the menu dropdown must be clear, concise, and action-oriented.

For a basic menu toggle, the label should be descriptive (e.g., "Actions," "More options”). Menu toggle labels should aim to be 1-3 words long and should not wrap when viewed at the smallest breakpoint.

For a compact menu toggle, you must use a descriptive aria-label (e.g., "Account settings") for accessibility, as there is no visible text.

Use verb-noun format whenever possible (e.g., "Create user," "View details") for both actions and links. Menu items that are links should still describe where the link will take a user.

Aim for menu item labels that are 1-3 words. If an item requires more context, consider adding a description.

Headings should be used sparingly to categorize groups of items and improve scannability. They are helpful for dropdown menus with many items.

Menu item descriptions should be used if a menu item requires additional explanation.

A menu dropdown’s layout should not change much at different screen or container sizes. Both toggle variants can be used on mobile or desktop, depending on the context.

Do use only a single level of menu items for a menu dropdown.

Do not create multi-level menu dropdowns.

Do limit the number of items to 7 or fewer per group to make the options easy to scan.

Reconsider having more than 7 menu items if you are not categorizing the items into groups.

Do find a way to differentiate or separate destructive actions.

Avoid mixing destructive actions with non-destructive actions, especially if additional visual clues, like status icons, are not used.

Do add menu items that allow users to perform actions without changing any labels in the menu dropdown.

Do not use a menu dropdown for navigation or for form options that should be used in a select list.

Menu items in a single menu dropdown should usually be actions or functions.

Avoid mixing actions and links whenever possible. If those two types of menu items must be included, do not replace the link styling that’s built into the menu dropdown.