Forma 36

Dropdown

StorybookGithub
stable

Dropdowns allow users to access a list of multiple actions. A common use-case for Dropdowns is to build context menus.

A Dropdown should contain at least one DropdownList, and multiple DropdownListItem components to represent each action.

Table of contents

  1. Best practices
  2. Variations
    1. With title
    2. With multiple DropdownLists
    3. With links
    4. With max height
    5. With positioning
  3. Writing guidelines

Best practices

  • If there is a single action to display, use TextLink or Button instead
  • Use lists and titles to group similar actions
  • Use a single TextLink at the bottom of the list for an action that is considerably different than the rest

Variations

Dropdown with title

Use a title to clarify the purpose of a dropdown

Dropdown with multiple DropdownLists

Use multiple DropdownLists to group actions together. A DropdownList can contain a border to visually separating these lists.

Dropdown with links

DropdownListItems can also contain TextLinks. These are often used to highlight related actions to the content of the DropdownList.

Dropdown with max height

DropdownLists can have a max height to limit the height of the dropdown and introduce scrolling. This should be used when dropdowns need to contain a lot of data.

Dropdown positioning

Dropdowns are positioned automatically however they can be specifically positioned also. This should be used when a Dropdown's auto-positioning is conflicting with another visual element.

Writing guidelines

  • To make Dropdown action-oriented, use a verb. For example, "Add field", not "New field"
  • Use clear and succinct copy