Dropdowns lists (or simply dropdowns) are used to provide the user with a list of options, which can be either actions or input values. Dropdown lists are triggered by dropdown buttons or form inputs.
There are two main types of dropdowns:
These dropdowns usually present a list of actions. They can be thought of as a collection of buttons.
These dropdowns are used as inputs. The individual rows in these dropdowns can show a checkmark to indicate that they have been selected or enabled. A dash (
Dropdowns are placed below the element they stem from. However, when there isn’t enough space in the viewport, the dropdown is moved above.
If there are more rows than fit the dropdown, an overlay with a fade effect will be added at the top or bottom of the dropdown to indicate there are more rows to be scrolled. When reaching the end of the scrollable area, the overlay will be removed.
There are some special elements that can be included in dropdowns to better adapt them to different situations.
A header can be added to make the dropdown's purpose clear. For example, the header Assign milestone can be added to make it clear that selecting an option will modify an issue's milestone instead of applying a filter.
An example of a dropdown with a header.
Section headers are used to categorize the options in a dropdown. A separator must always be included in between sections.
An example of a dropdown with section headers.
If there are more than 20 elements in the list, it may be necessary to include a filter box.
An example of a dropdown with a filter box.
A limited amount of rows that don't scroll can be fixed at the bottom of a dropdown. For example, the dropdown used to switch between issue boards has two fixed options at the bottom: Create new board and Delete board.
An example of a dropdown with fixed rows.
Todo: Add live component block with code example
Color, spacing, dimension, and layout-specific information pertaining to this component can be viewed using the following link: