Menu / Dropdown

A form field that allows the selection of one or more items from a predefined list of options.

Content

Copy guidelines

Make dropdowns and menus easy to scan by using the same pattern for all options, e.g. all verbs, all verb + noun.

  • Ideal: 3 words max (15 characters), acceptable: up to 5 words (25 characters). Keep it as short as possible.
  • Clear, concise, and concrete
  • Usually will start with an active verb
  • Use the same structure for all options ({{verb + noun}})
  • Keep what will happen after clicking in mind:
    • If it opens a dialogue or takes you to another page, the dialogue/page’s title should reflect the menu item
    • If it triggers an action, the menu item should be a clear, transparent verb
Do
MenuDropdown-DoDont-Copy-Do
Don’t
MenuDropdown-DoDont-Copy-Dont

 

Types

Levels

Levels used in such menus are limited to a maximum of 2, a primary and a secondary level. Preference is for 3+ options in a menu.

Do
MenuDropdown-DoDont-Levels-Do
Don’t
MenuDropdown-DoDont-Levels-Dont

 

Placement

Depending on mouse position and free space on screen, both the primary and secondary levels open in a direction where most real estate is available. This means that in Q1, menus preferably open to the bottom right, in Q2 to the bottom left, in Q3 to the top right and Q4 to top left.

MenuDropdown-Example-Placement

 

Best Practices

Icon

Using icons in context menus is optional. Use them to create an identifiable visual indicator for a common action or clarify an action if text alone is not enough to explain its functionality. Don’t use icons when they can’t make the actions easier to understand.

 

Native App

Use the native component: menu, context menu and lists

MenuDropdown-Example-NativeApp1
MenuDropdown-Example-NativeApp2
MenuDropdown-Example-NativeApp3
MenuDropdown-Example-NativeApp4
MenuDropdown-Example-NativeApp5
MenuDropdown-Example-NativeApp6

 

Resources

(internal only)

Figma

Storybook