Figma
Component Status
Up to date
Status
Stable
HTML
Up to date
React
Up to date
Twig
Up to date
Design Usage
A Dropdown is a lightweight container that appears on user action (usually clicking a Button or Icon) and overlays other content. It can hold any type of content — commonly lists of actions, navigation links, or filters. Dropdowns are anchored to a trigger element (like a button or icon) and dismissed when the user selects an option or clicks away.
When to Use
- To display a small set of related actions attached to a trigger (e.g., “More options”). Typical use is on a secondary button in Split Button
- For compact menus that don’t need a full page or modal.
- To reveal contextual controls (e.g., settings for a table row).
- For filters or sorting options in places where space is limited.
When Not to Use
- For inline expansion of content – use Accordion or Collapse.
- For larger or more complex content that requires more space or persistence – use Drawer.
- For disruptive, task-focused content that requires user action before continuing – use Modal.
- For temporary global notifications that appear above all content – use Toast.
- For selecting from many options you can use the component Select instead
Best Practices
There are general recommendations which doesn’t have to be tightly coupled to our implementation. If you find that some features are missing, please contact the Spirit team.
- Always anchor Dropdowns to a clear trigger (button or icon).
- Keep content short and scannable – avoid overloading with too many options.
- Use consistent alignment (typically left-aligned under the trigger).
- Dismiss Dropdowns automatically when the user clicks outside or selects an item.
- Ensure Dropdowns don’t obscure important content or overlap the trigger awkwardly.
- Use animation subtly to reinforce appearing/disappearing without being distracting.