A dropdown allows a user to select a value from a set of options.
Triggering the dropdown opens a list of several items for the user to choose from. The focus is set on the first item in the list. As soon as one item is clicked, the dropdown closes and the selection is updated immediately. The dropdown box resizes to fit its new content.
Sizes and spacings
x: 12px y: depends on the content z: 16px
x: 12px y: 28px z: 4px
font-family: Bernina Sans Regular font-size: 14px color: $gray-700 vertical-align: center
height: 32px border-width: 1px //inside border-color: $gray-300 border-radius: 3px background-color: #fff
height: 16px width: 16px icon color: $turquoise-600
font-family: Bernina Sans Regular font-size: 14px line-heigth: 28px color: $gray-700
font-family: Bernina Sans Bold font-weight: 700
max-height: 250px border-width: 1px //inside border-color: $gray-300 border-radius: 3px (except of edges connected to dropdown box) width: depends on the content min-width: width of dropdown box
Hover on dropdown box
Hover on item
background-color: $gray-130 border-width: 1px //inside border-color: $gray-300 icon-color: $gray-300 text-color: $gray-300
Icons in dropdowns
To differentiate between types of items in the dropdown it is possible to use icons.
Colors in dropdowns
The colorpicker behaves like a dropdown and allows to select from a predefined color palette, containing all chart colors.
x: 12px y: 16px z: 20px
Default state of color box
border-width: 1px //inside border-color: $gray-300 border-radius: 3px height: 20px width: 20px
Hover state of color box
height: 24px width: 24px
Same as default disabled dropdown. The color box shows the default or selected color.
Grouping in a dropdown
If needed, content can be grouped within a dropdown.
There are two kinds of groups:
- A tree approach where every item in the list is clickable (e.g. continent as well as country).
- Grouping as a subdivision. The grouping header is not clickable in this approach.
Group name (not clickable)
font-family: Bernina Sans Regular font-size: 12px color: $gray-500
Usage in a sentence
A dropdown can also be used within a sentence. It's possible to have several of these sentences underneath each other.
By default a dropdown opens to the bottom-right. If there is not enough space, the direction can be adjusted.