Dropdowns
A dropdown menu displays a list of options for the element that triggers it. Dropdowns are used to conserve screen space. Because they are a standard widget, users know how to deal with them. When used in forms and for attribute selection, dropdown boxes prevent users from entering erroneous data, since they only show specific data choices.
- Label: Use a clear label that will represent the following list of options when triggered.
- Arrow Icon: Use a arrow icon to give the user a clear indication there's a list of options.
- List: Provide a list of attributes for the user to select.
Usage
Dropdowns display a list of options that are not easy to manage on the screen. This mechanism organizes these options into a condensed menu, keeping the screen clean and making their intention more implicit.
Dropdowns are usually triggered from a dropdown button or a button with an icon. These are the two most common implementations in Commure.
To close a dropdown, use one of the following methods:
- Select an option in the panel, if they are mutually exclusive.
- Click on the button that triggered it.
- Click outside the panel.
Dropdowns have a maximum width of 240px. When an option's text doesn't fit into the available space, use two lines. The text for each option should be short and specific enough to be able to fit on one line if possible.
The maximum height is 500px for desktop and 400px on mobile devices. Vertical scroll is allowed when the content exceeds the limit.
The distance between the trigger button and the dropdown must be 8px.
Variations
Default
The default dropdown is a panel that doesn't support scrolling for the content inside it. Use the default configuration when you have a small number of options or when the panel is big enough to contain all the elements you want to use.
Default active
Default dropdown as the user clicks on the button a list appears with options.
Dropdown with no background
Dropdowns can be used in a simplified form. A simplified dropdown can be used in various components such as tables, forms, lists and more...
Dropdown search
Dropdowns can also be used combined with a search to allow a user to easily find a specific label without having to scroll through a list.
