Preview
Code
<usln-dropdown theme="light">
<usln-dropdown-button
theme="light"
label-text="Dropdown button trigger"
>
</usln-dropdown-button>
<div slot="dropdown-items">
<usln-dropdown-header theme="light" header-text="Header 1" icon="chevron_left">
</usln-dropdown-header>
<usln-dropdown-item
theme="light"
is-disabled="true"
description-text="Description for Item 1"
label-text="Item 1"
icon="folder"
>
</usln-dropdown-item>
<usln-dropdown-item theme="light" label-text="Item 2" icon="favourite">
</usln-dropdown-item>
<usln-dropdown-separator theme="light"></usln-dropdown-separator>
<usln-dropdown-item theme="light" is-selected label-text="Item 3">
</usln-dropdown-item>
<usln-dropdown-item theme="light" label-text="Item 4" is-selected>
</usln-dropdown-item>
</div>
</usln-dropdown>
Light dropdown example with different items and elements
Guidelines
Use a dropdown menu to present a list of selectable items. These can be:
- actions the users might want to perform,
- links used for navigation,
- options to be selected.
A dropdown menu can be triggered by a number of elements:
- the dropdown button,
- another type of button, most commonly an icon button in case of "more" menus.
Behaviour
Opening
Most dropdown menus should open below the dropdown trigger. The only exception is lack of vertical space that cannot be managed otherwise (eg. through scrolling inside the menu).
The menu should always be aligned to the edge of the trigger. Image below shows allowed open menu positions. Dropdown menus should not change their open position.
Scrolling
Displaying scrollbars is not compulsory. Limit dropdown height and introduce scrolling when lack space is a concern, or the dropdown is becoming too long to use comfortably. For particularly long dropdowns with many options, use search. Use custom scrollbar component for consistent, subtle design across platforms.
Search
Use search to limit the height of the dropdown and give users an easier way to find the desired option in a long list. Search should be displayed in any dropdown that has minimum 8 items. Search results are displayed instantly and follow the same order as the regular dropdown view. If section titles are present, they should be visible in the results as well.
Selection
Most dropdowns are single-select. When the user clicks the desired option, the dropdown menu should close. For multi-select, the dropdown menu stays open until the user concludes the selection by clicking a confirm button or closing the dropdown.
Keyboard interaction
Do's and dont's
- Set a max-height to avoid overly long dropdowns.
- Use search to help users find the right item in a longer list.
- Don't mix multiple item types in a single menu.
- Don't use multiple item properties in a single item type, eg. key and icon.
- Don't use icons in the menu if they don't improve recognizability, i.e., all icons are the same. An icon in the dropdown button would be sufficient in this case (though also not necessary).
Content guidelines
Avoid overly long item labels. In case of content overflow, do not wrap text into lines, but truncate it with an ellipsis and add a tooltip to display the entire label.
Remember to specify the order of items. Alphabetical may work for some cases, but recency or frequency of use might be more applicable.
Menu layouts
List
Use for short, simple dropdowns, such as "more" menus.
Sections
Use sections (particularly with icon items) if you need to display multiple types of values in the same dropdown, e.g., different segment types.
Types of headers
- Dropdowns can have a single or multiple static section headers
- Dropdowns can have a single clickable section header, which usually allows the user to go a level up in the menu.
- Dropdowns have the option to use a button as a header, though this variant should be used rarely. The button does not select an option from the list, but rather takes the user out of the dropdown into a different context.
Footers
Any type of layout can in addition have a footer containing buttons. An example usecase could be to confirm selection in a multi-select dropdown.
Item types
Any layout can be used with any item type. Stick to a single item type per dropdown. Remember to use the appropriate item type for a given dropdown button, such as an item with key used with a dropdown button with key.
All item types
Items with key
To be used exclusively for language-related dropdowns.
Items with description
The only item type that can take more than 1 line. The description can break into two lines, but should not be any longer. Remember, that only the item label (not description) will be displayed in the dropdown button, so it has to be meaningful enough on its own.
Multi-select
Allows users to select multiple options. Multi-selection results are displayed as chips (tokens) within the dropdown button.
Items with status dots
This is an extra item variant that replaces icons with the Status dot component. It's used to display status
