Dropdown
Also known as: Popover menu, Select menu
Resources
Properties
| Property | Values | Default |
|---|---|---|
Swap content InstanceSwap | Any component | Placeholder |
Best practises
- Use dropdowns to present a list of options or selections.
- Keep dropdown options concise and easy to scan, avoid very long lists when possible.
- On mobile, prefer native select dropdowns to improve usability.
- Make sure to support keyboard navigation and screen readers for accessibility.
When to use
When presenting a list of selectable options in a compact space.
When users need to select one option from a predefined list without overwhelming the interface.
For focused interactions that temporarily block the main content.
If displaying a list of selectable options and the number of options is very limited, consider using radio button instead.
If users need to compare multiple options at once, use drawer or dialog instead.
If frequent selection is required, such as toggling between views, use tab list instead.
Note:
Instance swap allows using custom content in a component. Read about the feature from Figma learn.
Behaviour
Dropdowns expand vertically to reveal a list of selectable options when triggered. They overlay the content without navigating away. Dropdowns close automatically when an option is selected or when clicked outside the dropdown area.
Size
Dropdown width typically matches the trigger element but can expand wider to provide better readability.
Height of dropdown adjusts dynamically based on the number of options. Maximum height is set with max-height token to enable scrolling when the content overflows.