Skip to content
UX Atlas
Plate CMP·019 · ComponentGrid E2 · Rev. 2026-08-14

Dropdown

Content revealed below a trigger, a term that covers three different components and causes confusion.

ComponentCraft conventionIntermediate

Definition

Dropdown is a colloquial term rather than a precise one. It variously means a select, a menu of actions, or a navigation panel. Each has different semantics, keyboard behaviour and accessibility requirements.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Which component you actually mean
  3. 3Keeping the three meanings apart
  4. 4In practice
  5. 5Commonly confused with
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Deciding which component a design's dropdown actually is.

Common mistakes

  • One component used for all four purposes.
  • Menu semantics on navigation.
  • Hover-only opening.

Which component you actually mean

PurposeComponentSemantics
Choose a value for a formSelect or comboboxlistbox or combobox roles.
Run an actionMenumenu and menuitem roles.
Navigate somewhereDisclosure with a list of linksA button with aria-expanded and a plain list.
Show filters or a small formPopoverdialog or a labelled group.

Keeping the three meanings apart

Do

  • Decide whether it selects a value, runs an action, or navigates, and build the matching pattern.
  • Give a value selector a visible current value.
  • Use the native select when the options are plain values and the styling is negotiable.
  • Make the trigger say what will happen, not just More.

Do not

  • Build a custom select without implementing the full combobox keyboard contract.
  • Mix navigation links and destructive actions in one dropdown.
  • Use a dropdown for two options, where a pair of radios or a toggle is clearer.
  • Leave the reader unable to tell whether choosing has already taken effect.

In practice

  1. i.

    Three components, one shape

    The naming problem

    Dropdown describes a select, a menu and a navigation flyout in most codebases, which is why teams ship one component that does all three badly. Naming them separately is the first fix.

  2. ii.

    The custom select that lost the keyboard

    The cost of replacing native

    Replacing a native select means implementing arrow keys, Home, End, typeahead, Escape, the active descendant and the mobile experience. Most rebuilds cover the first two and stop.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Menu

Component

A list of commands, invoked from a button and closing once one is chosen.

Key difference

A menu offers actions and runs one. A dropdown selects a value, reports it back to a form, and changes nothing until the form is submitted.

Use Dropdown when

  • The items are values of one field.
  • The chosen value has to stay visible afterwards.
  • It will be submitted, validated or reset with the rest of the form.

Use Menu when

  • Each item does something rather than standing for a value.
  • The items are unrelated to each other.
  • There is nothing to show as the current state afterwards.

Learn about Menu

Local chart

CMP·019 · Region III · Grid E2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Hick's LawLAW·001 · PRINCIPLES BEHIND THISSteering LawLAW·016 · PRINCIPLES BEHIND THISPopoverCMP·012 · OFTEN USED WITHSelectCMP·004 · OFTEN USED WITHAutocomplete and TypeaheadPAT·003 · OFTEN USED WITHNavigationPAT·001 · OFTEN USED WITHMenuCMP·018 · COMMONLY CONFUSED WITH

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

Navigation

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.