Dropdown
UI ComponentsAn interactive element that reveals a list of options when clicked, allowing users to select one or more items from a collapsed menu.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Dropdown coming soon.
How It Works in Apps/Websites
Dropdowns consist of a trigger (button or input field) and a menu that appears below (or above if near screen edge). When triggered, options appear in a list. Single-select dropdowns close after selection; multi-select may stay open. They save space by hiding options until needed.
How AI Interprets This Term
When you say 'dropdown', AI expects: a trigger element (button or input with down arrow icon), and a menu panel appearing below with a list of selectable items. Menu has slight shadow, rounded corners, and hover states on items. Selected item shows checkmark or highlight.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a dropdown menu for selecting a country
Design a multi-select dropdown with: search input at top, grouped options (Popular Countries, All Countries), checkboxes for each option, selected count in trigger button. Max height 300px with scroll.
Show a simple dropdown vs a searchable combobox with filtering
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •When you have 5-15 options
- •When space is limited
- •For selecting from predefined options
- •Navigation submenus
When NOT to Use
- •Very few options (2-3) - use radio buttons
- •Many options (50+) - use searchable combobox
- •When users need to see all options at once
Related Terms
Checkbox
A small square box that can be toggled between checked and unchecked states, used for selecting multiple options from a list or confirming a single choice.
Popover
A floating container that appears near a trigger element, displaying additional content, actions, or forms without leaving the current context.