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

How to use Dropdowns

  • 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

Code examples

Dropdown with a 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.

Content recommendations:

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

Accessibility

  • Missing