← All terms

Fig. 23 / Dropdown · In motion

Web UI Patterns

Dropdown

EXPLAINED SIMPLY:A dropdown is the control that shows only your current choice until you click it, then opens the list of other options.

A dropdown is the control that shows only your current choice until you click it, then opens the list of other options. Closed, it's one quiet line. Open, it's a menu.

The picture shows both halves: closed, it reads Standard shipping and nothing else; open, the full list appears with a checkmark on the current choice. A dropdown buys back screen space by hiding every option except the one already chosen.

One word covers two patterns. There's the form dropdown (pick a country, pick a shipping speed) and the navigation dropdown (hover over Products in a menu and a list of pages unfolds). Context usually makes it obvious which one is meant, and developers call the form one a "select," after the HTML tag.

The classic misuse is hiding a tiny list. If there are only two or three options, don't put them in a dropdown; show them all and let people tap one. A dropdown makes every choice cost a click, a scan, and another click. It belongs at country-picker scale, where 195 visible options would swallow the page.

You'll also hear "dropdown menu," "drop-down," "select menu," and "pulldown," an older Mac word for the same thing.

When the list is long and the answer is single, ask for a dropdown. When the choice is on or off, that's a toggle's job.