Dropdown

Dropdowns are used to display a contextual subview with a list of actions or content related to the area where the dropdown is.

• Supports any type of content: Dropdowns may be used in a lot of contexts like date pickers, language selection or other product features.
• Action Menu: One of the most used scenarios for dropdowns is providing an action menu for the user, so it’s useful to have this layout defined.
• Focus Trapping: Once the dropdown’s opened, the focus should work only for elements inside the dropdown. When it’s closed, the focus should move to the dropdown trigger.
• Close Action: Either some actions inside the dropdown should close it or there should be a separate close button. Also, it’s good practice to close the dropdown when a user clicks outside.
• Keyboard Navigation: It should be possible to navigate through dropdown children elements with the keyboard and close it with an Esc key.
• Dynamic Position: Dropdown content should be displayed based on the current position of the trigger element on the screen and always visible to the user.
• Responsiveness: Dropdown content should be adapted for mobile viewpoints as it may take a lot of space on desktops.