Dropdown menu

Dropdown menus present a lists of selectable options.

Known issues
Known issues


Storybook failed to load. Please connect to the VPN to access.



                                                            <usln-dropdown theme="light">
                                                            label-text="Dropdown button trigger"
                                                          <div slot="dropdown-items">
                                                            <usln-dropdown-header theme="light" header-text="Header 1" icon="chevron_left">
                                                              description-text="Description for Item 1"
                                                              label-text="Item 1"
                                                            <usln-dropdown-item theme="light" label-text="Item 2" icon="favourite">
                                                            <usln-dropdown-separator theme="light"></usln-dropdown-separator>
                                                            <usln-dropdown-item theme="light" is-selected label-text="Item 3">
                                                            <usln-dropdown-item theme="light" label-text="Item 4" is-selected>

Light dropdown example with different items and elements



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.




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.

dropdown menu placement



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.

dropdown menu scrolling



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.

dropdown search results



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


Use for short, simple dropdowns, such as "more" menus.

Dropdown menu, Header=None, Layout=List, Items=Plain, Theme=Light, Footer=False



Use sections (particularly with icon items) if you need to display multiple types of values in the same dropdown, e.g., different segment types.

Dropdown menu, Header=None, Layout=Sections, Items=Icon left, Theme=Light, Footer=False


Types of headers

Header types
  • 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.



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.

Dropdown menu, Header=None, Layout=Sections, Items=Multi-select, Theme=Light, Footer=True


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

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.

item with description



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

dropdown menu dots