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 together under a single drop-down can save space, reduce noise, and spare the user mental overload, while still keeping the context of the interface.

Best practices

Dropdown button should:

Include a visual cue that it opens an activity list:
A downward caret (▼) to indicate the button will open a menu.
Three dots indicating a "more options" list.
Have a label associated with the content of the drop-down.
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, unless there's a reason it cannot be done. In that case, the list should open above the button.

Try to avoid:

Too long lists (more than 10 items).
Multiple actions for each activity list item.
Alphabetic ordering of items when there is a more logical ordering possible based on meaning.
To have only a very few menu items to show. Instead, make discrete buttons for those actions.
Making a drop-down with multiple levels of depth: the user shouldn't have to use further drop-downs inside a drop-down content.
Making the drop-down content too big, too bloated "mega drop-down". Instead try to organise the content in different drop-downs on the same level.
Including actions in the drop-down out of place based on the label of the drop-down button.

Content guidelines

Dropdown button label should:

Have a clear and descriptive text, avoid too vague words, like "More".