A dropdown menu displays a list of options for the element that triggers it.
Dropdowns display a list of options that are not easy to manage on the screen. This mechanism organizes these options into a condensed menu, keeping the screen clean and making their intention more implicit.
Dropdowns are usually triggered from a dropdown button or a button with an icon. These are the two most common implementations in Lexicon.
To close a dropdown, use one of the following methods:
Dropdowns have a maximum width of 240px. When an option's text doesn't fit into the available space, use two lines. The text for each option should be short and specific enough to be able to fit on one line if possible.
The maximum height is 500px for desktop and 400px on mobile devices. Vertical scroll is allowed when the content exceeds the limit.
The distance between the trigger button and the dropdown must be 8px.
The default dropdown is a panel that doesn't support scrolling for the content inside it. Use the default configuration when you have a small number of options or when the panel is big enough to contain all the elements you want to use.
Use a dropdown menu with dividers to keeps actions organized in an actions menu. Organizing the actions by context of use makes it easier for users to find them.
Dropdowns can be configured to have checkboxes and/or radio groups. You can use checkboxes to filter dataset elements, while a radio can be useful for ordering the criteria in a dataset.
Action menus can sometimes contain multiple elements, making it a little time consuming to scroll through the entire list of options. In these cases, you can add a search field to your dropdown menu so your users can quickly find the action and move on to their next task.
This configuration is also suitable to help quickly identify an actions menu item with an icon that closely relates to it.
Dropdown menus with icons on the right are suitable for process bars (wizards) when the number of steps do not fit the screen. It displays the remaining steps and emphasizes the step number by placing the icon on the right side.
This dropdown menu variation is for use with the management bar Filter and Order dropdown button. This configuration is used to refine the management bar UI options, providing the user with more specific mechanisms to find data.
Buttons in dropdown groups can either be primary or secondary, depending on the application needs.
Below is a list of guidelines for creating actions menus. Note that not all of these guidelines are always required:
Plus button's can contain multiple actions. When this is the case, these actions are displayed in a dropdown menu.
Users can customize a list of favorites in the plus button's dropdown menu, as shown in the message in the image on the left. This is available via a modal window that is triggered by the More button at the bottom. An example configuration is shown in the image on the right.
Note: The default behaviour of the More button is to load more items in the dropdown menu, but it is not the desired one.
Favorites are ordered using the following rules:
Out of the favorites the order is ruled as follows:
Dropdown menus for plus buttons can also contain scrollbars to view a long list of items, as shown in the image below.
When creating dropdown menus for plus buttons, please follow the guidelines shown below: