Dropdown menu design examples

What is a dropdown menu?

A dropdown menu is a control that reveals a list of options on click or tap and collapses after the user picks one. The name covers several patterns: a select field in a form, a combobox that filters as you type, an action menu behind a button, and a navigation or profile menu in a header.

When should you use a dropdown?

Use a dropdown when there are too many options to show at once and the user already knows roughly what they are looking for. With fewer than five options, radio buttons or a segmented control are faster because nothing is hidden. With long lists such as countries, a combobox that filters as the user types beats scrolling.

What makes a dropdown easy to use?

Show the current value in the closed state, keep option labels short, and mark the selected item in the open list. Support the keyboard: arrow keys to move, Enter to choose, Escape to close. On phones, a native picker or a bottom sheet is usually easier to hit than a small floating list.

Where do these dropdown examples come from?

Most are components from shipped products documented by Mobbin, with dropdown designs published on Layers and on the Framer marketplace. Muzli follows more than 200 design sources and lists up to 60 matching pieces here, favouring recent work.