Dropdown menu

Component checklist

Overview

Dropdowns allow the user to select one option from a list of many.

When to use

• Dropdowns can be used in forms, modals, side panels, or within more complex components to select one action only.

When not to use

• It is best practice not to use a dropdown if only two options exist. In this case, use buttons instead.
• Do not nest dropdowns or use them to display overly complex information. Keep option selections as straightforward as possible.
• Consider using a select or multi-select if most of your experience is form-based.

 

Formatting

Anatomy

1. Dropdown trigger: The trigger is usually represented by an icon-only button with a meatballs icon to show more options under it. The button has inSelected state if the dropdown is open.
2. List of options: The list is populated once a user clicks on the field and displays all possible actions the user can provide. It is shown by default under the field. However, if there is not enough space, it can be shown above.
3. Submenu indicator: A chevron icon that indicates a submenu.
4. Divider: The divider is used to differentiate destructive or important actions on the list like create, remove, archive, etc.

 

Sizes

We use two sizes of dropdown buttons: medium and small. To choose the right one, consider the context of the situation.

1. Medium: Use the medium field for most cases. This is the default size.
2. Small: Use the small field size only in cases where there is a lack of space in the UI.

 

Submenus

A submenu is a menu item with the chevron icon on the right that offers additional related controls that appear next to the main dropdown menu.

By default, the submenu opens down and overlaps the main menu. The first item is aligned with the parent item from the main menu.

While submenus can help tidy up a context menu and make its options clearer, introducing multiple levels of submenus can make the user experience more complex and complicated to navigate.

We recommend avoiding multiple levels of nesting when it comes to submenus.

Actions associated with a shared item label

Consider removing recurring terms in submenu labels to improve predictability and scanning.

 

Keyboard

• The dropdown field is the element that receives focus. All keyboard interactions happen from this element.
• Users can move the highlighted option to the next option by pressing the Down arrow
• Users can move the highlighted option to the previous option by pressing the Up arrow
• Users can open the dropdown menu by pressing Space or Enter
• Users can close the dropdown menu by pressing Escape or Enter