DropdownMenu

DropdownMenu is a component for displaying the list of options and their nested items.

DropdownMenu has two sizes.

The width of the dropdown can be defined several ways:

It is recommended that the dropdown list with search should have a maximum height of seven items. If there are more items, the dropdown will have a scroll and a fader for the next item.

However, if you're using DropdownMenu for a list of links and controls, such as a menu, it is essential not to limit the dropdown's height. This is necessary to display all possible options to the user.

The list always drops down, regardless of space availability under the trigger. This behavior is necessary to enable accessible keyboard control of the list.

• If the list is taking a long time to load or filter results (e.g., due to a slow connection), the dropdown should display "Loading...".
• If a user enters a value that is not in the list, the dropdown should display "Nothing found".
• If there are backend errors, a warning message should be displayed with the text "Something went wrong. Please try again later."

If the list takes time to load, such as when the system cannot load it all at once or when searching for data elsewhere, change the Chevron icon to a spinner with XS size. In this case, the trigger is not clickable and remains in the default state.

For more information about trigger states, refer to Select / Multiselect.

If the list includes a search input, it should automatically receive focus when the user opens the dropdown.

As the user enters a value into the input, only the items that match the input should remain in the list. Do not highlight these items in this case.

The dropdown list can be separated by Divider.

List item can be a title. It does not have hover or active state and it is not clickable. The title always has font-weight: var(--bold) and the same size as the list items have.

You can add a button to any list.

Action button opens another dropdown, takes user to a new page or performs any other action on the page.

The item with button should have the same hover as a regular item in the list.

This item with such a button adds a new item and has the following states:

You can add an icon to the right of an item for an additional action.

You can add reset button to the list to reset the selected value or values. Place it at the top of the list.

The reset button appears only if any item from the list is selected. After user clicks on the item, the button should hide and the trigger gets the the default value with placeholder.

You can put the following addons before and after the text inside the list item:

• Icon,
• Flag,
• Badge,
• user picture or avatar,
• control such as Link, Button or Switch.

Before the text you can place an icon, flag or image. In this case icon always has the color of the text.

After the text you can place either non-interactive and interactive addons: an icon, badge, switch, link or button.

If an icon displays additional information about an item, we recommend placing it right next to the text.

Info icon displays a tooltip when hovered over (see examples in the Informer). We recommend making the active zone for the icon larger than the icon's size. The margin between the icon and the text should always be 4px.

You can place a text counter after the text. It should have the same size that item's text has.

Badge can be placed after the text. The margin between the text and the badge is always 4px. If item with badge is selected, then do not show badge in the trigger.

You can add additional text with --text-secondary color under the main text of the item.

If DropdownMenu has more than seven items, show scroll. We also recommend adding search input to such lists.

If you use a DropdownMenu for a menu, show all the items even if there are more than seven. It's important for the user to see all available options, especially if there are links or different controls. We do not recommend using a scroll for such menus.

You can fix an item with a title, input, notice or a button on the top or at the bottom of the list. Such item should be separated by a Divider and fixed while scrolling the list.

The item of the list can have a list of items inside. In this case, it should have the ChevronRight icon after the text.

The maximum nesting level is three, but it's best to avoid nesting as it can be uncomfortable to work with long lists. If there is enough space, nested lists will drop to the right. If there isn't enough space, they will drop to the left.

Nested groups will be hidden after a delay of 0.3 seconds in the following cases:

• When the user hovers over another item in the parent list.
• When the mouse cursor moves away from the dropdown.
• When the entire dropdown closes (e.g., by pressing the Esc button).

If you select a nested item, only its name will be displayed in the trigger, without the name of the parent item.