Description

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:

Verint LUX Design System > Drop-down Menu > image2019-1-3_17-49-5.png

Types

Type	Usage
Textual dropdown Menu
Multi Selection Dropdown Menu
Searchable Dropdown Menu

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).

Verint LUX Design System > Drop-down Menu > image2019-1-3_17-56-18.png

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:

Select trigger - opens the option list.
Option List - displays the list of items available. The menu can be textual only or display icons, next to the text, as shown below:
(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:

Verint LUX Design System > Drop-down Menu > image2020-1-23_16-40-49.png

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:

Verint LUX Design System > Drop-down Menu > image2019-12-30_15-57-35.png

If not:

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

Verint LUX Design System > Drop-down Menu > image2019-12-30_15-58-48.png

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

Verint LUX Design System > Drop-down Menu > image2019-12-30_15-59-28.png

States

Verint LUX Design System > Drop-down Menu > image2019-1-3_18-3-51.png

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

Verint LUX Design System > Drop-down Menu > image2020-1-23_16-25-52.png

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

Validations and errors

Please refer to Field validation page for more information.

An example for a drop down menu with a warning: Verint LUX Design System > Drop-down Menu > image2019-11-19_14-1-57.png

An example for a drop down menu with an error: Verint LUX Design System > Drop-down Menu > image2019-11-19_14-1-22.png

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:

Verint LUX Design System > Drop-down Menu > image2019-11-19_15-56-8.png

Quality Monitoring Advanced Search:

Verint LUX Design System > Drop-down Menu > image2019-11-19_16-1-48.png

New LUX design

<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">

<div class="card">
    <div class="card-header">Menu Button <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
    <div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
							<div class="dropdown-menu dropdown-menu-sm">
								<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Fifth Option</a>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
<div class="dropdown-menu dropdown-menu-sm">
	<a class="dropdown-item" href="#">First Option</a>
	<a class="dropdown-item" href="#">Second Option</a>
	<a class="dropdown-item" href="#">Third Option</a>
	<a class="dropdown-item" href="#">Fourth Option</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="#">Fifth Option</a>
</div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="col-lg-4">
							<button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>Menu</button>
							<div class="dropdown-menu dropdown-menu-sm">
								<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Fifth Option</a>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>Menu</button>
<div class="dropdown-menu dropdown-menu-sm">
	<a class="dropdown-item" href="#">First Option</a>
	<a class="dropdown-item" href="#">Second Option</a>
	<a class="dropdown-item" href="#">Third Option</a>
	<a class="dropdown-item" href="#">Fourth Option</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="#">Fifth Option</a>
</div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
						<div class="col-lg-4">
							<button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle is-invalid" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
							<div class="dropdown-menu dropdown-menu-sm">
								<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Fourth Option</a>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle is-invalid" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
<div class="dropdown-menu dropdown-menu-sm">
	<a class="dropdown-item" href="#">First Option</a>
	<a class="dropdown-item" href="#">Second Option</a>
	<a class="dropdown-item" href="#">Third Option</a>
	<a class="dropdown-item" href="#">Fourth Option</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="#">Fifth Option</a>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>