Dropdown component
A dropdown allows users to see information or choose a list item from an overlay window. It can be used to display the menu of a pane.
Structure
A dropdown is an overlay window that displays lists or action links.
If different sections need to be shown, each section should have a label.
View “Menu section” for more information.
If a dangerous action is added, It should be in red and at the end of the list.
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.