Overview
The dropdown component has three types: ghost, structured and full width. Alongside the three accents (selected, placeholder and active) serve different functions.
In addition to these different types of dropdown, the menu experience differs depending on the operating system.
Key Features
- The text of the placeholder dropdown accent is less prominent to emphasize the lack of action.
- Customizable icons to provide further context to the dropdown.
- Until a menu option is selected the placeholder label is retained.
- The menu appearance depends on the operating system, with the iOS form shown below.
Depending on the operating system, the type and form of the menu that originates from the dropdown component may differ. To the left is the iOS version with the menu on the right is that from the Android operating system.
Usage
Limit the amount of dropdown options to avoid overloading users.
Avoid showing more than 5/6 dropdown options.
When using the full-width dropdown, position this dropdown type at the top of a given page.
Avoid placing the full-width dropdown in the middle and/or at the bottom of a page.
By default the menu element is displayed below the dropdown/relevant element. However if there is not enough space to fully contain the menu then it is position above the relevant element.
Avoid positioning the menu options in a position that would obscure all of the menu items.