When dropdowns fit
Dropdowns save space by hiding options. Li (2017) notes that with few options, showing them all is better: a segmented control or radios allow instant comparison. With hundreds, choice slows (Hick's law; Hick, 1952), so search works better. Dropdowns suit the middle range.
Dropdowns on mobile
Native selects open as wheels or lists that suit fingers, while custom dropdowns may be tiny or clipped; long lists can use a bottom sheet. Material (Google, n.d.) describes exposed dropdowns, and split menus with frequent items on top speed long lists (Sears & Shneiderman, 1994).
Accessibility and behaviour
Custom dropdowns need roles, expanded state and arrow keys per the W3C menu button pattern (n.d.); native select is safest. Per WCAG 2.2 (W3C, 2023) 3.2.2, selection alone must not navigate away. Keep labels visible and avoid misleading defaults. Menu shape also affects speed (Callahan et al., 1988).
FAQ
- Are dropdowns and select boxes the same?
- Usually; select refers to the HTML element, dropdown to expanding menus broadly.
- How many options suit a dropdown?
- No fixed rule; show two or three openly and use search for very many.
Sources reviewed: 2026-10-27
References
- Li, A. (2017, June 11). Dropdowns: Design guidelines. Nielsen Norman Group. When to use dropdowns.
- Google. (n.d.). Menus. Material Design 3. Exposed dropdown menus.
- World Wide Web Consortium. (n.d.). Menu button pattern. ARIA Authoring Practices Guide. ARIA roles and keys.
- Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26. More options, longer decisions.
- Sears, A., & Shneiderman, B. (1994). Split menus: Effectively using selection frequency to organize menus. ACM Transactions on Computer-Human Interaction, 1(1), 27–51. Split menus for long lists.
- Callahan, J., Hopkins, D., Weiser, M., & Shneiderman, B. (1988). An empirical comparison of pie vs. linear menus. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 95–100). ACM. Menu shape affects speed.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. Criterion 3.2.2 on input.
