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.