Dropdowns

Introduction

Dropdowns are essential UI patterns that help organize actions and content in a space-efficient way. They appear on demand and dismiss when the user clicks outside, presses escape, or selects an option. When to use:

• Display contextual actions - Show a menu of actions related to a specific element
• Save space - Present options or content that would otherwise clutter the interface
• Provide selections - Let users choose from a list of options
• Show additional information - Display details or controls on demand

Types

Button triggered dropdown

Trigger: button Dropdown menu: Dropdown-menu/popover

Input triggered dropdown

Sometimes, when a user is filling in an input, you would like to give reasonable suggestions either looking at data or known values. Use this pattern for those instances where the dropdown merely acts as a auto-suggest but the user is not limited to the options in the dropdown.

Filter triggered dropdown

Select triggered dropdown

Guidelines

Positioning

• Dropdowns should appear below their trigger element when possible
• If there isn’t enough space below, they should appear above
• Align the dropdown edge with the trigger element for visual connection

Content

• Keep menu items concise and actionable
• Use headings to organize long lists into logical groups
• Use dividers to separate different types of actions
• Limit the number of items to avoid overwhelming users (consider filtering or search for long lists)

Interaction

• Clicking outside the dropdown should dismiss it
• Pressing the Escape key should dismiss it
• Selecting an item typically performs an action and dismisses the dropdown
• The trigger element should clearly indicate when the dropdown is open

Accessibility

• Ensure keyboard navigation works properly (arrow keys, Tab, Enter, Escape)
• Use semantic HTML and appropriate ARIA attributes
• Provide clear focus indicators
• Ensure sufficient color contrast for all text

Best Practices

Do:

• Use clear, action-oriented labels for menu items
• Provide visual feedback on hover and focus
• Keep dropdown content focused and relevant
• Use icons to help users scan options quickly

Don’t:

• Nest dropdowns within dropdowns (use alternative patterns instead)
• Include too many options without organization
• Use dropdowns for navigation that should be always visible
• Hide critical actions in dropdowns

Related Patterns

• Select - For form inputs where users choose from predefined options
• Menu - For application navigation and global actions
• Tooltip - For displaying brief contextual information