computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.2 KiB
1.2 KiB
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.