Drop-down menu

Lexicon Design System

A drop-down menu shows a list of functions from the item that triggers it.

Drop-down lists are usually opened by pressing a button on them or by hovering over them with the mouse. The first option has now become predominant because people are increasingly using mobile devices, where you need to click on the screen to call this function.

The default dropdown is a panel that does not support scrolling within its content.

Dropdown lists can be configured to have checkboxes and/or radio button groups.

Dropdown list with the search field

A drop down menu can sometimes contain many items, so scrolling through the entire list of options takes a long time. In these cases, you can add a search box to the drop-down menu so that your users can quickly find the right action and move on to the next task.

Dropdown list with delimiters
The easiest way to organize content within dropdown menus is to use separators.

There are the following main groups of functions (use a dividing line between each of the groups):

Basic commands: edit, view, open, etc.

Secondary object-specific commands: expiration, view history, etc.

Transfer commands: copy, duplicate, move, export, import, etc.

Object settings: permissions, configuration, etc.

Object commands: delete, move to trash, etc.

Basic Rules

1. The group size must be less than or equal to seven.
2. The total number of elements should not exceed 15 pieces.
3. Use dividing lines between groups.
4. Keep the submenu menu simple.
5. Groups should be ordered by frequency of use.
6. For elements within a group, use alphabetical order.
7. Use icons to make it easier to visually find and identify an action.

Plus button with dropdown menu

The plus button can contain multiple actions. If yes, these actions will appear in the drop-down menu.

Users can customize the favorites list using the “Advanced” button.

Actions are organized according to the following rules:

1. The first two points are the most common.
2. The rest are listed in alphabetical order.
3. Dropdown menus for plus buttons can also contain scrollbars for scrolling through a long list of items, as shown in the figure below.

Dropdown menu actions in plus button with config selected and scrollbar.

1. It is important to display custom posts indicating the total number of activities in the category.
2. Example: “Showing 5 out of 100 articles”
3. When expanding a list, the drop-down menu cannot contain more than 15 actions.