Description

ONGOING 

A drop down menu consists of related content grouped together and organized vertically.

It allows users to select a single value from a list of predefined values.

Example:

Types

Usage & Behavior

General guidelines

Text 

A drop down menu can have a preceding label, or not (see example below).

When exists, the label informs the users what to expect in the options list.

The label should be clear and short (limited to a single line).

Internal Logic

Users need to select one item exclusively from a short list of options (minimum 3 items, maximum - y).

Structure

The drop-down consists of:

1. Select trigger - opens the option list.
2. Option List - displays the list of items available. The menu can be textual only or display icons, next to the text, as shown below:
   
   
   
3. (Optional) Action icons for dropdown menus that add extra functionality on items, when hovered. Those icons will display a tooltip describing the action, when hovered.

   For example:

Order

Choose one of the following styles to order the content:

Logical: Sort items into a meaningful order. Group related options together and show the most common options first, followed by less common options. 

Alphabetical: Sort the options alphabetically if more than 8 select options are available. This helps the user find the right option quickly. Sort currencies, names, and similar content alphabetically.

Numeric:Sort numeric values into a sequential order, with the lowest number first.

Chronological:Sort time-related information into chronological order, with the most recent first.

Default Values

The drop down consists of a text box showing a default value, if exists. For example:

If not:

• If a label exists, the default text will be "Select". 

• If there is no label, the default text will be "Select a {NameOfEntity}". For example, "Select a queue".

States

Interaction

The Select field always displays the current selection. 

The user clicks or taps the field to display a list of options to choose from. 

Once the user selects an option, the list box closes and the selected option is displayed in the field. 

Hovered items are highlighted with a light blue background color. 

Selected items have a blue V sign on the left side of the value as shown below

Unlike 'Combo Box', the user cannot enter text in the text box (excluding 'Type-ahead dropdown menu')

Validations and errors

Please refer to Field validation page for more information.

An example for a drop down menu with a warning: 

An example for a drop down menu with an error: 

Best practices

• The drop down should be used when the list of available values is long and space is constrained.
• Only a list with over 15 items should show a scrollbar.
• When there are less than 7 options and the user needs to see them all at once → use radio buttons.
• When the user needs to enter a value which is not in the list → use a combo box.
• Keep the text values as short as possible because the list uses single lines only. 
• The option list should adapt its length to the longest entry by default, but values that are too long may be truncated, having a tooltip displaying their full text (not recommended) - There is no horizontal scrolling in the option list. 
• Place options that represent All or None at the beginning of the list, regardless of the sort order of the remaining items.
• Do not allow the control to auto-adjust based on the selection.

Design

Zeplin Link	Screen Thumbnail
https://zpl.io/bWOjejb

Current appearances in our products

Forecasts:

Quality Monitoring Advanced Search:

New LUX design