When to use dropdown?
The dropdown is an overlay block that appears above the interface when an action is performed on a component.
Position
The drop element can be placed all around the slot according to the limit of the screen. By default, it has to be placed at the bottom-left position.
Use cases
In this case, the top slot is a button with a dropdown containing input text, a button and other elements
In this case, the top location is an entry with a drop-down menu containing a hierarchy of items that you can modify.
When you hover the top text a dropdown with additional information takes place.
Do / Don't
|
DO |
DON’T |
Execute actions or provide concise information, as well as grouping together a set of actions in a limited space. |
Execute actions, fill in complex, multi-step forms, or manage voluminous content. |