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
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.
- To make Dropdown action-oriented, use a verb. For example, "Add field", not "New field"
- Use clear and succinct copy