Typically used to show menus or filters such as searchable lists or date ranges, dropdowns have no content of their own and can in theory contain anything. They should however not be used to display short help texts, in those cases please use the Tooltip component.
https://invis.io/YWYF1Z98AFV#/428476961_Dropdown_-_Anatomy
Dropdowns are shown when clicking on their trigger, and their position is relative to it:
• Bottom-Left (default) • Bottom-Middle • Bottom-Right • Top-Left • Top-Middle • Top-Right
https://invis.io/P9YM6GRT3UQ#/430208635_Dropdown_-_Position
Dropdowns are by default empty, but can contain any type of content. Typically they will be used for contextual menus, searchable lists or date range selection. See the other two most common examples (Menu & List).
To assure this components are accessible, dropdowns will not open/close on hover. We have to click outside the element or the trigger to close the dropdowns.
Dropdowns have a padding top/bottom of 4px.
https://invis.io/WA10M3Y15VRQ#/445908675_Dropdown_-_Paddings
https://invis.io/PB10M3Z6WQY4#/445908678_Dropdown_-_Specs
While the only thing that can actually change about a dropdown is its position relative to the trigger, there are also a few common content types that are normally placed inside, which we listed below.