EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Components    3.5.Dropdown

3.5.Dropdown

A dropdown list is an element that allows users to make a single selection from a pre-defined list of familiar and/or quantitative options.

They save screen space and prevent users from entering erroneous data, since they only show legal choices.

They are less prominent and take up less space than selection controls, such as a set of radio buttons.

3.0.Components      3.5.Dropdown      3.5.1.Usage

3.5.1.Usage

  • Exposed dropdown menus (the ones used at Daimler) display the currently selected menu item above the list of options, while the other variant does not.
  • When select menu grows larger than 15 options they become difficult to scan and navigate. Huge drop-down lists can be real nightmare for your users, because the user will be forced to scroll inside the list. In this case, you can always group your options.

  • You should also avoid having a default unless you believe a large portion of your user’s (maybe 90%) will select that value. Particularly if it’s a required field.
  • The selection of the menu option should be highlighted in color when it is moused over (background color: internal sites: petrol; external sites: black).
Some Image
Illustration

Dropdown list style used at Daimler

    3.0.Components      3.5.Dropdown      3.5.2.Download Resources

    3.5.2.Download Resources

    Designs of the Dropdown component are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste them into your designs or use the Sketch file as a linked library and import the symbols.

    See the Sketch Design Kit