The dropdown enhances usability by displaying a list of choices in a collapsible menu, optimizing space while keeping options easily accessible. It supports icons, sections, and different selection behaviors to adapt to various use cases. Designed for efficiency, it ensures keyboard navigation, accessibility, and proper contrast for readability.
- 1.Dropdown: the main container that triggers the list of options when clicked, allowing users to select an item.
- 2.Listbox: the expanded panel displaying all available options for selection.
- 3.Icon: a visual aid that can accompany the selected option, helping users quickly recognize the category or purpose.
- 4.Label: the textual representation of the selected option, ensuring clarity in the user's choice.
- 5.Expand/collapse icon: an indicator that shows whether the dropdown is expanded or collapsed.
- 6.List item: an individual option within the dropdown list, which users can click to make a selection.
Dropdowns have a similar look and behavior to select components, the difference is that while select is only to collect user's data into a form, dropdown can be used in various scenarios.
- Dropdowns display a list of options that appear when the user clicks or hovers over the parent element, providing a compact and efficient way to make selections.
- The arrow linked to the dropdown label indicates to the user that more options are available but currently hidden.
- By default, a dropdown expands below its main container if there is enough screen space to accommodate the full size of the pop-up.
If displaying the dropdown below the selector hides important information, reducing discoverability and scanability, consider alternative ways to present the content or adjust the pop-up's position to better fit the application's needs.
Icons can be used within the dropdown component in various configurations. They can be placed before or after the label or serve as the sole content of the dropdown placeholder and options. This maintains consistency with other components in our Design System, such as buttons and selects, which follow the same behavior.
- User clear and concise labels: ensure dropdown labels are descriptive and easily understood, helping users quickly grasp their choices. Avoid vague terms like "Select an option.”
- Prioritize logical ordering: arrange options in a meaningful order—alphabetically for lists, by frequency of use for common selections, or categorically when grouping similar items.
- Keep the list of options manageable: avoid overwhelming users with too many options. If the list is long, consider using grouped sections or an alternative selection method like autocomplete.
- Ensure accessibility: provide sufficient contrast, keyboard navigation, and screen reader support. Icons should always have accessible labels to maintain clarity.
- Avoid nesting too deep: multi-level dropdowns can be hard to navigate. If multiple selection levels are required, consider using a different component, like a sidebar or tree structure.
- Be mindful of placement and screen space: ensure the dropdown appears in a location where it doesn't obscure critical content. If needed, adjust its position dynamically to fit within the viewport.
- Use icons thoughtfully: icons can enhance usability but should only be added when they add clarity. Overloading the dropdown with icons can create visual clutter.