Skip to main content

Dropdown Guidelines

Use the dropdown button to open a pre-defined piece of content, like a list of menu items or local settings. Grouping multiple related actions under a single dropdown can save space, reduce noise, and spare the user mental overload.

Best Practices​

Dropdown button should:

  • Include a visual cue that it opens an activity list:
    • A downward caret (▼) to indicate it will open a menu.
    • Three dots indicating a "more options" list.
  • Have a label associated with the content of the dropdown.
  • Close the activity list if the user clicks outside.
  • Order items by user importance (action impact and frequency of usage).
  • Group similar items together and visually separate groups with horizontal lines.
  • Open the activity list under the button by default; open above only if there's a reason it cannot open below.

Try to avoid:

  • Too long lists (more than 10 items).
  • Multiple actions for each activity list item.
  • Alphabetic ordering when a more logical ordering based on meaning is possible.
  • Very few menu items — make discrete buttons for those actions instead.
  • Multiple levels of depth: the user shouldn't encounter further dropdowns inside a dropdown.
  • Overly large "mega dropdown" content — organise content in different dropdowns on the same level instead.
  • Including out-of-place actions that don't match the dropdown button's label.

Content Guidelines​

Dropdown button label should:

  • Have clear and descriptive text. Avoid vague words like "More".