A dropdown allows users to have details information and/or perform actions. 

Inventory app with dropdown

Structure

A dropdown is an overlay window used to display any type of information.

Behavior

When users toggle a dropdown, the overlay window shall appear below the element that generates it.

If users click on a dropdown item or anywhere outside the window, the dropdown shall disappear.

 

Style

Dropdowns are squares with a 1px grey outline and 4px corner radius. To make them stand out from the rest, they shall have a shadow.

Related pages

An info popover allows users to have more information about a specific element.
The pane menu allows users to perform actions related to the pane content
A select field allows users to select one option from a list of more than 10 items.