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β
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β
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.
Footerβ
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.