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
- Best practices
- With title
- With multiple DropdownLists
- With links
- With max height
- With positioning
- Writing guidelines
- 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 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.
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.
- To make Dropdown action-oriented, use a verb. For example, "Add field", not "New field"
- Use clear and succinct copy