Skip to main content

Dropdown

The Dropdown is a floating item list that allows interaction on one or more items. It can have a simple list of items, items with icons and supporting text, and still allow the selection of one or more options from the list of items.

You can use Dropdown to open a Modal, send the person to another page, or select an item to apply to a filter. Use this component only for these purposes. For others, we recommend using Autocomplete or Select.

Width​

The minimum width is 160 pixels but the maximum width depends on the size of your inner elements. When writing item texts, be succinct and avoid making one text too large in comparison to the rest.

Item types​

info

It is currently not possible to customize the style of the Dropdown items.

Simple text​

The common use of an item. It allows you to use a main text to describe the item and, if necessary, a supporting text to supplement it.

Critical action​

Use the critical actions item when the item's action is related to some irreversible action or negatively impacts a flow.

With icon​

tip

Icons add complexity and can impact reading options, so use only when really necessary.

Icons are optional decorative elements that reinforce the meaning of an item and always appear to the left of the main text.

With Tag component​

Without content​

For scenarios where a Dropdown items do not exist. It is also possible to allow the person to create an item from Dropdown.

Dividers​

Line divider​

Use the line-style divider when you need to create a visual separation between items.

Grouper with text​

When the intention is to create a grouping of items, use the text divider, in which you can add a name for the group of items.

Selection​

Single selection​

Use for cases where only one option can be selected, such as selecting a filter in a listing. In this scenario, when clicking on an option, the filter should already be applied.

Multiple selection​

Use in cases where more than one option can be selected. It can be applied in the case of selecting a filter, however in this scenario, we recommend adding an "Apply" button in the Dropdown footer so that the filter is applied only when this button is clicked.

Structure​

Header​

Dropdown can have a special area at the top for components or elements that add functions. The Search components can be applied to the header.

Dropdown can also have a special area below the dropdown list, for specific components and elements. Buttons must appear separated from the list by a dividing line, so use the secondary button to not conflict with primary actions.

With loading​

Use when loading items from Dropdown is asynchronous.

Navigation​

Use when you need to create a navigation within the same Dropdown. For example, selecting a custom period as a filter.

Feedback​