Dropdowns: Design Guidelines

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title>Dropdowns: Design Guidelines</title><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="721be388-83be-48ef-9882-002f0dc9dc4f"></script><script>(function(){ var FLAGS = { 'use_server_algolia_search_flag': false,'use_teamdesk_api_for_user_profile_override': false,'enable_user_auth_redesign': true,'use_cart_redesign': false,'use_local_user_profile_cert_and_exam_meta_data_apis': true,'banner_sales': false,'use_profile_redesign_flag': false,'not': false,'use_local_user_profile_exam_api': false,'enable_reportcart_dataclass': true }, SWITCHES = { 'stripe_invoice_auto_send': false,'exclude_bank_transfer_payment': false,'create_course_reminders': true,'allow_course_new_fields_editing': false,'send_exam_availability_reminder_email': false,'send_repeated_course_emails': false,'use_virtual_overview_redesign': true,'permanently-migrate-slack': false,'use_teamdesk_message_etl': true,'slack-integration': true,'use_course_search_redesign': false,'use_course_calendar_redesign': false }, SAMPLES = { }; window.waffle = { "flag_is_active": function waffle_flag(flag_name) { return !!FLAGS[flag_name]; }, "switch_is_active": function waffle_switch(switch_name) { return !!SWITCHES[switch_name]; }, "sample_is_active": function waffle_sample(sample_name) { return !!SAMPLES[sample_name]; }, "FLAGS": FLAGS, "SWITCHES": SWITCHES, "SAMPLES": SAMPLES }; })(); </script><script data-cookieconsent="ignore"> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments) } gtag("consent", "default", { ad_personalization: "denied", ad_storage: "denied", ad_user_data: "denied", analytics_storage: "denied", functionality_storage: "denied", personalization_storage: "denied", security_storage: "granted", wait_for_update: 500 }); gtag("set", "ads_data_redaction", true); gtag("set", "url_passthrough", false); </script><script type="text/plain" data-cookieconsent="statistics">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=oQvLGCv6ryZLP7PJLlpI-g&gtm_preview=env-2&gtm_cookies_win=x';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-THJDDHK');</script><link rel="preconnect" href="https://media.nngroup.com/"/><link rel="preconnect" href="https://consent.cookiebot.com/"/><link rel="preconnect" href="https://consentcdn.cookiebot.com/"/><link rel="preconnect" href="https://www.googletagmanager.com/"/><link rel="preconnect" href="https://dnn506yrbagrg.cloudfront.net/"/><script src="https://media.nngroup.com/static/js/output.2e14f0aaa8d0.js" async></script><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.55aab3a9e87a.css" type="text/css"><meta name="description" content="Dropdown boxes and menus are overused and clunky but can be useful for revealing a list of options or commands."/><meta property="og:description" content="Dropdown boxes and menus are overused and clunky but can be useful for revealing a list of options or commands."/><meta name="keywords" content="drop-down menus, menu design, dropdown, pull-down, pop-up, pop-ups, drop-downs, design guidelines, drop down, drop down menus"/><meta name="robots" content="noarchive"/><meta name="twitter:dnt" content="on"/><meta property="og:title" content="Dropdowns: Design Guidelines"/><meta property="og:url" content="https://www.nngroup.com/articles/drop-down-menus/"/><meta property="og:site_name" content="Nielsen Norman Group"/><meta property="og:type" content="article"><meta property="og:image" content="https://media.nngroup.com/media/articles/opengraph_images/Dropdowns_1.jpg"><meta name="twitter:site" content="@nngroup"/><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="https://www.nngroup.com/articles/drop-down-menus/"><link rel="search" type="application/opensearchdescription+xml" title="NN/g Search" href="/opensearch.xml"/><link rel="shortcut icon" href="https://media.nngroup.com/static/img/favicon.ico"/><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.1b70725e7506.css" type="text/css"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Dropdowns: Design Guidelines", "image": [ "https://media.nngroup.com/media/articles/opengraph_images/Dropdowns_1.jpg" ], "datePublished": "2017-06-11T16:00:00+0000", "dateModified": "2024-10-24T18:30:55+0000", "author": [ { "@type": "Person", "name": "Angie Li" } ] } </script> </head> <body class=" article-detail " > <div class="skip"><a href="#main">Skip to content</a></div> <div class="svg-definitions"> <svg width="0" id="icon-error-svg" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.55228 3 9 3.44772 9 4V9C9 9.55228 8.55229 10 8 10C7.44772 10 7 9.55228 7 9V4C7 3.44772 7.44772 3 8 3ZM8 13.5833C8.55229 13.5833 9 13.1356 9 12.5833C9 12.031 8.55229 11.5833 8 11.5833C7.44772 11.5833 7 12.031 7 12.5833C7 13.1356 7.44772 13.5833 8 13.5833Z" fill="currentColor"/> </svg> <svg width="0" id="icon-error-svg-outlined" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" > <circle cx="12" cy="12" r="11" fill="currentColor" stroke="black" stroke-width="2"/> <circle cx="12" cy="18.625" r="1.5" fill="black"/> <path d="M12 6L12 13.5" stroke="black" stroke-width="2.5" stroke-linecap="round"/> </svg> <svg width="0" id="icon-confirm-svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M3.52197 18.3985L10.5027 25.3792C10.9079 25.7844 11.5699 25.767 11.9532 25.3411L28 7.50989L27.0315 6.63916L11.1992 24.2311L4.44338 17.4753L3.52197 18.3985Z" fill="currentColor" stroke="black"/> </svg> <svg width="0" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="icon-information"> <circle cx="8" cy="8.08008" r="7.25" fill="currentColor" stroke="black" stroke-width="1.5"/> <path d="M7.24718 11.7468V6.64511H8.75918V11.7468H7.24718ZM7.99804 5.89425C7.74433 5.89425 7.53861 5.82225 7.3809 5.67825C7.22318 5.53425 7.14433 5.34225 7.14433 5.10225C7.14433 4.86225 7.22318 4.67025 7.3809 4.52625C7.53861 4.38225 7.74433 4.31025 7.99804 4.31025C8.25176 4.31025 8.45747 4.38225 8.61518 4.52625C8.7729 4.67025 8.85176 4.86225 8.85176 5.10225C8.85176 5.34225 8.7729 5.53425 8.61518 5.67825C8.45747 5.82225 8.25176 5.89425 7.99804 5.89425Z" fill="black"/> </g> </svg> <svg width="0" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="logo"> <path d="M0 26.8755V3.69629H4.93343L11.244 17.4356H11.3146V3.69629H15.4258V26.8755H11.1128L4.18181 11.9141H4.11623V26.8755H0Z" fill="currentColor"/> <path d="M23.2194 26.8755V3.69629H28.1579L34.4684 17.4356H34.534V3.69629H38.6503V26.8755H34.3373L27.4012 11.9141H27.3357V26.8755H23.2194Z" fill="currentColor"/> <path d="M65.1485 15.8523C65.1485 18.0045 64.1699 19.0682 62.2177 19.0682C60.1646 19.0682 59.0902 18.0094 59.0902 15.9513C59.0902 13.7348 60.1343 12.7057 62.1521 12.7057C64.301 12.7057 65.1485 13.6705 65.1485 15.8573V15.8523ZM67.1713 11.4738C65.1838 11.4738 64.6945 10.5684 62.2177 10.5684C58.6664 10.5684 56.2098 12.7651 56.2098 15.981C56.2098 18.1034 57.6828 19.9241 59.872 20.597C57.6525 21.2649 56.9311 22.0318 56.9311 23.3132C56.9311 24.7678 58.0813 25.6385 60.0032 25.6385C60.5228 25.6385 61.8595 25.6088 62.5103 25.6088C64.1043 25.6088 65.0829 25.7672 65.7034 26.1877C66.2885 26.5736 66.5811 27.2514 66.5811 28.1172C66.5811 30.1111 65.1485 30.9175 62.6414 30.9175C61.34 30.9175 60.1343 30.6306 59.3525 30.1754C58.7673 29.8241 58.4092 29.1463 58.4092 28.3102C58.4092 27.7956 58.6362 27.2168 58.8682 26.8606L56.1846 27.0882C55.9525 27.7313 55.8567 28.2162 55.8567 28.795C55.8567 31.0759 57.824 32.8619 62.9088 32.8619C66.8484 32.8619 69.3707 31.3034 69.3707 27.8303C69.3707 26.445 68.846 25.3169 67.5698 24.4462C66.5861 23.7684 65.547 23.5408 63.6553 23.5408H61.0524C60.2403 23.5408 59.751 23.2538 59.751 22.7739C59.751 22.2297 60.4975 21.6855 62.6818 20.9186C63.8521 20.9186 64.8963 20.7256 65.7084 20.221C67.2066 19.2958 68.1247 17.6285 68.1247 15.8276C68.1247 14.7985 67.7968 13.898 67.141 13.0965C67.4386 13.2252 67.8321 13.2895 68.2558 13.2895C69.2395 13.2895 69.9911 13.0322 71.005 12.3198L69.4362 10.7712C68.6493 11.2858 68.0288 11.4837 67.1763 11.4837L67.1713 11.4738Z" fill="currentColor"/> <path d="M44.1991 33.5001C44.1184 33.5001 44.0326 33.4852 43.9519 33.4605C43.5282 33.3269 43.2962 32.8767 43.4374 32.4611L53.8642 1.04428C54.0004 0.62869 54.4544 0.401103 54.8781 0.539634C55.3018 0.673217 55.5288 1.11849 55.3926 1.53409L44.9608 32.9509C44.8498 33.2824 44.5371 33.4951 44.1941 33.4951L44.1991 33.5001Z" fill="currentColor"/> </g> <g id="icon-burger"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.5C4.82824e-08 0.947715 0.447715 0.5 1 0.5L19 0.500002C19.5523 0.500002 20 0.947717 20 1.5C20 2.05229 19.5523 2.5 19 2.5L1 2.5C0.447715 2.5 -4.82821e-08 2.05228 0 1.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 17.5C4.82824e-08 16.9477 0.447715 16.5 1 16.5L19 16.5C19.5523 16.5 20 16.9477 20 17.5C20 18.0523 19.5523 18.5 19 18.5L1 18.5C0.447715 18.5 -4.82821e-08 18.0523 0 17.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.5C4.82824e-08 8.94772 0.447715 8.5 1 8.5L19 8.5C19.5523 8.5 20 8.94772 20 9.5C20 10.0523 19.5523 10.5 19 10.5L1 10.5C0.447715 10.5 -4.82821e-08 10.0523 0 9.5Z" fill="currentColor" /> </g> <path id="icon-search" d="M29.921 27.5861L22.1292 20.034C24.0015 17.8554 24.9351 15.061 24.7359 12.2322C24.5367 9.40331 23.2199 6.75782 21.0594 4.84601C18.899 2.9342 16.0613 1.90327 13.1366 1.96769C10.2119 2.03211 7.42541 3.1869 5.3568 5.19186C3.2882 7.19681 2.09674 9.89755 2.03028 12.7322C1.96382 15.5669 3.02747 18.3173 4.99997 20.4113C6.97248 22.5053 9.70196 23.7815 12.6206 23.9747C15.5393 24.1678 18.4224 23.2629 20.6702 21.4481L28.462 29.0002L29.921 27.5861ZM4.12735 13.0002C4.12735 11.2202 4.67195 9.48015 5.69228 8.0001C6.71261 6.52006 8.16284 5.36651 9.85958 4.68532C11.5563 4.00413 13.4234 3.8259 15.2246 4.17317C17.0259 4.52044 18.6804 5.3776 19.9791 6.63628C21.2777 7.89495 22.1621 9.49859 22.5204 11.2444C22.8787 12.9903 22.6948 14.7999 21.992 16.4444C21.2891 18.0889 20.099 19.4945 18.5719 20.4835C17.0449 21.4724 15.2496 22.0002 13.4131 22.0002C10.9512 21.9976 8.59091 21.0485 6.85009 19.3613C5.10928 17.674 4.13008 15.3864 4.12735 13.0002Z" fill="currentColor"/> <path id="icon-open-nav" fill-rule="evenodd" clip-rule="evenodd" d="M8.19398 11.5945C7.85227 11.9362 7.29825 11.9362 6.95654 11.5945L1.29969 5.93763L2.53712 4.7002L7.57526 9.73833L12.6134 4.7002L13.8508 5.93764L8.19398 11.5945Z" fill="currentColor"/> <g id="icon-cart"> <circle cx="11.3124" cy="22.5204" r="1.83485" fill="currentColor"/> <circle cx="25.5299" cy="22.5204" r="1.83485" fill="currentColor"/> <path d="M7.56201 3.11621H28.2498C28.8012 3.11621 29.2054 3.63495 29.0707 4.16965L27.1371 11.8434C27.0424 12.2195 26.7041 12.4832 26.3162 12.4832H10.6505" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> <path d="M1.82202 1H5.3761C5.74546 1 6.07219 1.23947 6.1834 1.59169L11.2469 17.6284C11.3581 17.9806 11.6848 18.2201 12.0542 18.2201H25.8257" stroke="currentColor" stroke-width="1.75" stroke-linecap="square"/> </g> </svg> <svg id="icon-close-svg" viewbox="0 0 22 22" width="0" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="icon-close"> <path d="M1 1L20.5 20.5" stroke="currentColor" stroke-width="2" /> <path d="M20.5 1L1 20.5" stroke="currentColor" stroke-width="2" /> </g> </svg> </div> <header class="banner-image" > <nav class="nav-main desktop" aria-label="main"> <button class="burger-button"> <svg width="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Open main navigation</title> <use href="#icon-burger" /> </svg> </button> <a href="/" class="logo" aria-label="Nielsen Norman Group - Home"> <svg width="71" viewBox="0 0 71 34" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Nielsen Norman Group</title> <use href="#logo" /> </svg> </a> <ul> <li class=" has-subnav"> <button aria-controls="nav-live-courses" aria-expanded="false">Training & UX Certification <svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul id="nav-live-courses"> <li class=""> <a href="/courses/">All Live Courses</a> </li> <li class=""> <a href="/training/live-courses/">About Live Courses</a> </li> <li class=""> <a href="/team-training/">Private Team Training</a> </li> <li class=""> <a href="/training/bulk-discounts/">Bulk Discounts</a> </li> <li class=""> <a href="/ux-certification/">UX Certification</a> </li> </ul> </li> <li class="selected "> <a aria-current="page" href="/articles/">Articles & Videos</a> </li> <li class=" "> <a href="/consulting/">Consulting</a> </li> <li class=" "> <a href="/reports/">Reports & Books</a> </li> <li class=" has-subnav"> <button aria-controls="nav-about-home" aria-expanded="false">About NN/g <svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul id="nav-about-home"> <li class=""> <a href="/about/">Overview</a> </li> <li class=""> <a href="/people/">People</a> </li> <li class=""> <a href="/about/about-client-list/">Clients</a> </li> <li class=""> <a href="/news/">News</a> </li> <li class=""> <a href="/about/contact/">Contact Us</a> </li> </ul> </li> </ul> <div class="cart empty" aria-hidden> <a href=/cart/> <svg width="30" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-cart" /> </svg> <span></span> </a> </div> <div class="profile has-subnav"> <button class="loading" aria-expanded="false">Profile <svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> </div> <form role="search" action="/search/" method="get" data-algolia-app-id="ORI4VVAEA5" data-algolia-search-api-key="562fc62a44f3e67b0e9b1d7a40fb17e2" data-index="Document_production_query_suggestions" > <button type="button" class="search-button search-toggle-button" aria-controls="search-form-content" aria-expanded="false"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> <div class="form-content" id="search-form-content"> <label class="visually-hidden" for="search">Search</label> <div id="search-autocomplete"><input id="search" name="q" type="search" /></div> <button type="reset" class="reset-button empty" disabled> <svg width="13" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Reset</title> <use href="#icon-close" /> </svg> </button> <button type="submit" class="search-button"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> </div> </form> </nav> </header> <main id="main"> <section class="padded"> <div class="wrapper"> <article> <span id="gaDataLength" class="ga-data-layer" aria-hidden="true">5</span> <div class="article-header"> <h1 class="article-h1">Dropdowns: Design Guidelines</h1> <div class="article-authors"> <span id="gaDataAuthors" class="ga-data-layer" aria-hidden="true">Angie Li</span> <div class="author-tile multiple body-small"> <div class="author-photos"> <img height="64" width="64" class="author-photo fluid" src="https://media.nngroup.com/media/people/photos/IMG_2729_copy-square-close-800px.jpg.256x256_q75_autocrop_crop-smart_upscale.jpg" alt=""> </div> <div class="author-meta"> <span class="authors-list"> Angie Li </span> <p class="publication-date"> June 11, 2017 <span id="gaDataPubDate" class="ga-data-layer" aria-hidden="true">2017-06-11</span> </p> </div> </div> </div> <div class="article-share"> <a class="article-share-title ga-share" href="#"> <span class="article-share-icon"></span> <p class="article-share-label body-medium">Share</p> </a> <div class="share-links tooltip"> <div class="tip-arrow"></div> <ul> <li class="body-medium"> <a class="ga-share-email" target="_blank" href="mailto:?subject=NN/g Article: Dropdowns: Design Guidelines&body=https://www.nngroup.com/articles/drop-down-menus/" data-share-type="Email"> <span class="icon envelope"></span>Email article </a> </li> <li class="body-medium"> <a class="ga-share-linkedin" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.nngroup.com/articles/drop-down-menus/&title=Dropdowns: Design Guidelines&source=Nielsen%20Norman%20Group" data-share-type="LinkedIn"> <span class="icon linkedin"></span>Share on LinkedIn </a> </li> <li class="body-medium"> <a class="ga-share-twitter" target="_blank" href="https://twitter.com/intent/tweet?url=http://www.nngroup.com/articles/drop-down-menus/&text=Dropdowns: Design Guidelines&via=nngroup" data-share-type="Twitter"> <span class="icon twitter"></span>Share on Twitter </a> </li> </ul> </div> </div> </div> <div class="article-container"> <div class="article-content"> <div class="article-summary article-heading-small-light"> <span class="article-summary-label"> Summary:  </span>Dropdown boxes and menus are overused and clunky but can be useful for revealing a list of options or commands. </div> <div class="article-body"> <p>Dropdowns clearly have their place in effective web design. However, their overuse and misuse creates many usability problems and confusion. Designers employ dropdowns for a variety of different purposes, including:</p> <ul> <li><strong>Command menus</strong>, which initiate an action based on the selected option</li> </ul> <figure class="caption"><img alt="" height="613" loading="lazy" src="https://media.nngroup.com/media/editor/2017/06/05/picture1.png" width="937"/> <figcaption><em>Microsoft Word used a dropdown menu to show publishing commands when users clicked the </em>Publish<em> icon.</em></figcaption> </figure> <ul> <li><strong>Navigation menus</strong>, which take users to a new location</li> </ul> <figure class="caption"><img alt="" height="521" loading="lazy" src="https://media.nngroup.com/media/editor/2017/06/05/picture2.png" width="974"/> <figcaption><em>Harvard used dropdown menus to provide a list of links to the subcategories for each top-level category.</em></figcaption> </figure> <ul> <li><strong>Form filling</strong>, which lets users select an option to enter into a form field</li> </ul> <figure class="caption"><img alt="" height="439" loading="lazy" src="https://media.nngroup.com/media/editor/2017/06/05/picture3-group.png" width="884"/> <figcaption><em><a href="http://ecityhall.sunnyvale.ca.gov">Sunnyvale.</a>ca.gov: This form used a dropdown to allow users to select a </em>Building Type<em>.</em></figcaption> </figure> <ul> <li><strong>Attribute selection</strong>, which lets users choose a value from a menu of possible values <figure class="caption"><img alt="" border="0" height="547" loading="lazy" src="https://media.nngroup.com/media/editor/2017/06/05/picture4.png" width="974"/> <figcaption><em>Adobe Color CC, a tool used to gather the RGB and HEX values for a set color palette, allowed users to choose a palette from a list of color rules.</em></figcaption> </figure> </li> </ul> <p>Although originally the terms “dropdown box” and “dropdown menu” were used interchangeably, over time a functional distinction has emerged between the two. Today, <strong>dropdown menus</strong> mostly cover the first two uses of dropdowns (navigation and list of commands), whereas dropdown boxes are often the method of choice for form fill-in and attribute selection.</p> <p><strong>Dropdown boxes</strong> generally look different than dropdown menus: they have a dropdown arrow next to them and are used to select attributes or enter form data. This control tends to be supported by a field label or a title that takes the position of the first item in the dropdown box, so that it can be seen before making a selection. Although MacOS and Windows have different dropdown implementations, in both cases the command menus are different from the attribute-selection menus. In fact, the <a href="https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/ControlswithMenus.html"><em>Macintosh Human Interface Guidelines</em></a> explicitly recommends to not use dropdown menus for commands.</p> <div class="table-of-contents"> <div class="content"> <div class="header"> <div class="toc-header"> <h2 class="toc-title article-heading-small"> In This Article: </h2> <span class="expand-icon"></span> </div> <a class="current-element" href="#"></a> </div> <ul class="toc-items"> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-guidelines-for-dropdown-design-1">Guidelines for Dropdown Design</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-conclusion-2">Conclusion</a> </li> </ul> </div> </div><h2 id="toc-guidelines-for-dropdown-design-1"><strong>Guidelines for Dropdown Design</strong></h2> <p>Dropdowns do have their advantages. First, they conserve screen space. Because they are a standard widget (even if an unpleasant one), users know how to deal with them. And, when used in forms and for attribute selection, dropdown boxes prevent users from entering erroneous data, since they only show legal choices.</p> <p>Despite these advantages, web usability would increase if designers used dropdowns less often. To that end, here are some design guidelines for dropdowns:</p> <ol> <li><strong>Avoid interacting menus</strong>, wherein the options in one menu change when users select something in another menu on the same page. Users get very confused when options come and go, and it is often hard to make a desired option visible when it depends on a selection in a different widget. <figure class="caption"><img alt="" border="0" height="455" loading="lazy" src="https://media.nngroup.com/media/editor/2017/06/05/untitled-3.png" width="978"/> <figcaption><em>iTunes: The </em>View<em> menu contains different options depending on whether the </em>Albums <em>(left) or the </em>Songs<em> (right) option is selected in the </em>Library<em> side menu.</em></figcaption> </figure> </li> <li><strong>Gray out any unavailable options </strong>instead of removing them: any items that cannot be selected should remain in view. For extra UX credit, consider showing a short balloon help message if users hover over a grayed-out option for more than a second, explaining why that option is disabled and how to make it active. <p>If disabled items are removed, the interface loses spatial consistency and becomes <a href="/articles/power-law-learning/">harder to learn</a>.</p> <figure class="caption"><img alt="" border="0" height="350" loading="lazy" src="https://media.nngroup.com/media/editor/2017/06/05/picture6.png" width="320"/> <figcaption><em>Snagit: </em>Gradient<em> and </em>Tolerance<em> options are grayed out to indicate that they cannot be selected when the </em>No Fill <em>option is chosen.</em></figcaption> </figure> </li> <li><strong>Very long dropdowns</strong> that require scrolling make it impossible for users to see all their choices in one glance. They also require careful steering of the mouse so that it does not leave the dropdown. (This is an instance of the steering law, which says that the time it takes a user to steer a pointing device through a tunnel depends on the length and the width of the tunnel: the longer and narrower the tunnel, the more time it takes users to move the pointer from one end to another. The steering law is derived from Fitts’ law, which we discuss in our <a href="http://www.nngroup.com/courses/hci/">Human-Computer Interaction course</a>.) <p>Resist the temptation to include many items whenever possible. If you have many items, consider alternative ways of presenting them — such as HTML lists of traditional links or <a href="/articles/mega-menus-work-well/">mega menus</a>, which are two dimensional instead of linear and offer easier mouse management and also <a href="/articles/expandable-menus/">faster average reach time</a> to items inside.</p> <div class="captioned"> <video controls="" poster="https://media.nngroup.com/media/editor/2017/06/05/picture7-replace.png" src="//media.nngroup.com/media/editor/2017/06/05/angieslist-compressed.mp4" width="100%">Your browser does not support the video tag.</video> <div class="caption"><em>Angie’s list used a dropdown for listing service categories. To see all the options, users had to scroll down several times.Users were unable to predict the end of the list because there was no scroll bar.</em></div> </div> </li> <li><strong>Avoid dropdown boxes when typing may be faster. </strong>Typical situations include <strong>lists of states or countries</strong>, such as for U.S. mailing addresses. It is much faster for users to simply type, say, "NY," than to select a state from a scrolling dropdown. Free-form input into fields with restricted options does require data validation on the backend, but, from a usability perspective, it's often the best way to go. (This is one of our <a href="https://www.nngroup.com/reports/e-commerce-user-experience/">ecommerce-usability</a> guidelines because of the many errors we observed in checkout forms with state dropdowns.) <figure class="caption"><img alt="" border="0" height="652" loading="lazy" src="https://media.nngroup.com/media/editor/2017/06/05/picture8.png" width="973"/> <figcaption><em>Tinyprints complicated the purchasing process by using a dropdown to change the quantity of mugs purchased. Typing the quantity would be much faster than selecting one from a dropdown.</em></figcaption> </figure> </li> <li><strong>Avoid dropdown boxes for data that is highly familiar to your users</strong>, such as the day, month, or year of their birth. Such information is often hardwired into users' fingers, and having to find these options in a long menu is tedious, breaks the previous guideline, and can create even more work for users. <figure class="caption"><img alt="" border="0" height="524" loading="lazy" src="https://media.nngroup.com/media/editor/2017/06/05/picture9.png" width="975"/> <figcaption><em>Live.com: To create an account, users had to enter their birthdates by selecting the month, day, and year from long dropdown boxes. It would have been easier to just type this information.</em></figcaption> </figure> </li> <li><strong>Keep the menu label or description in view </strong>when the dropdown is open. Menu titles provide scope and direction by reminding users what they are choosing. Whenever the labels are obscured or removed when the menu is open, users must recall what they need to select before they can take action. Plan for interruptions that can disrupt the user’s task at any time. <figure class="caption"><img alt="" border="0" height="651" loading="lazy" src="https://media.nngroup.com/media/editor/2017/06/05/picture10.png" width="973"/> <figcaption><em>The Square site hid the label, </em>Select Business Type<em>, when the dropdown was open. Users would need to recall the label in order to understand the context of the options in the dropdown. (We also usually advise against centered or right-justified menu options, since <a href="https://www.nngroup.com/articles/right-justified-navigation-menus/">left-justified menus are easier to scan</a>.)</em></figcaption> </figure> </li> <li><strong>Keep global navigation options out of dropdown menus on desktop. </strong><a href="/articles/killing-global-navigation-one-trend-avoid">Burying your site’s top-level categories</a> can be detrimental to user success on any site. <figure class="caption"><img alt="" border="0" height="549" loading="lazy" src="https://media.nngroup.com/media/editor/2017/06/05/picture11.png" width="975"/> <figcaption><em>The Joann site featured a handful of links in their top-level navigation, but most of the global navigation was in the </em>Departments<em> dropdown menu. This design choice made navigation options less discoverable.</em></figcaption> </figure> </li> <li><strong>Support keyboard input </strong>to navigate within a dropdown. Dropdowns (both menus and boxes) should support not only mouse input, but keys as well. In dropdown menus, access keys should enable users to quickly select a visible option without using the mouse. In a dropdown box, users should be able to type a letter and quickly navigate to options starting with that letter. <p>These alternative options will alleviate some of the problems caused by long dropdown lists, and also improve accessibly for blind users.</p> </li> </ol> <h2 id="toc-conclusion-2"><strong>Conclusion</strong></h2> <p>A while back, as part of a presentation on web-usability methods, we ran a small user test for the audience. When completing a registration page, our test participant had to enter her address on a form with a text field for the name of the street but a dropdown menu for the type of street (<em>Avenue</em>, <em>Boulevard</em>, <em>Court</em>, <em>Drive</em>, and so on). Guess what? The user typed her full street address in the text entry field, because that's what she'd always done in the past. The dropdown menu then came as a complete surprise and she had to go back to the text field and erase part of her already typed address information.</p> <p>This small study, conducted in front of a crowd of hundreds, shows that sometimes it is enough to run tests with a single user to clearly illustrate a point. Once you see such confusion in action, you realize that using a "helpful" dropdown menu to save users a few keystrokes can hurt more than it helps. Follow these guidelines in your own designs to improve your site navigation and increase task success.</p> </div> </div> <div class="article-sidebar"> <div class="sidebar-wrapper"> <span id="gaDataAllTopics" class="ga-data-layer" aria-hidden="true">menus,Navigation,Interaction Design</span> <div class="sidebar-item related-topics"> <h2 class="article-heading-small">Related Topics</h2> <ul> <li> <span id="gaDataTopic" class="ga-data-layer" aria-hidden="true">Navigation</span> <a class="ga-article-related-topic" href="/topic/navigation/">Navigation</a> </li> <li> <a class="ga-article-related-topic" href="/topic/interaction-design/">Interaction Design</a> </li> </ul> </div> </div> </div> </div> </article> </div> </section> <section class="learn-more"> <div class="wrapper"> <div class="related-content-container padded"> <h2 class="article-heading-small learn-more-title">Learn More:</h2> <div class="article-videos"> <div class="related-content related-videos"> <ul class="no-bullet three column grid"> <li> <div class="tile video"> <div class="media"> <a class="ga-article-related-video" data-video-title="3 Ways to Test Your Survey" href="/videos/3-ways-to-test-surveys/?lm=drop-down-menus&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/3_Ways_to_Test_Your_Survey_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/3_Ways_to_Test_Your_Survey_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/3_Ways_to_Test_Your_Survey_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </div> <div class="content"> <p class="related-content-title"> 3 Ways to Test Your Survey </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Maddie Brown </span> · <span class="related-content-duration body-small">3 min</span> </p> </div> </a> </div> </div> </li> <li> <div class="tile video"> <div class="media"> <a class="ga-article-related-video" data-video-title="Destination Pages vs. Transition Pages" href="/videos/destination-pages-vs-transition-pages/?lm=drop-down-menus&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </div> <div class="content"> <p class="related-content-title"> Destination Pages vs. Transition Pages </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Huei-Hsin Wang </span> · <span class="related-content-duration body-small">5 min</span> </p> </div> </a> </div> </div> </li> <li> <div class="tile video"> <div class="media"> <a class="ga-article-related-video" data-video-title="Flat vs. Deep Hierarchies in Information Architecture (IA)" href="/videos/flat-vs-deep-hierarchies/?lm=drop-down-menus&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Flat_vs._Deep_Hierarchies_in_IA_Thumbnail_Updated.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Flat_vs._Deep_Hierarchies_in_IA_Thumbnail_Updated.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Flat_vs._Deep_Hierarchies_in_IA_Thumbnail_Updated.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </div> <div class="content"> <p class="related-content-title"> Flat vs. Deep Hierarchies in Information Architecture (IA) </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Samhita Tankala </span> · <span class="related-content-duration body-small">4 min</span> </p> </div> </a> </div> </div> </li> </ul> </div> </div> <div class="related-content related-articles"> <h2 class="article-heading-small related-articles-title">Related Articles:</h2> <ul class="no-bullet three column grid"> <li> <a class="tile ga-article-related-article" data-article-title="Mega Menus Work Well for Site Navigation" href="/articles/mega-menus-work-well/?lm=drop-down-menus&pt=article"> <p class="related-content-title">Mega Menus Work Well for Site Navigation</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Jakob Nielsen and Angie Li </span> · <span class="related-content-duration body-small">7 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Expandable Menus: Pull-Down, Square, or Pie?" href="/articles/expandable-menus/?lm=drop-down-menus&pt=article"> <p class="related-content-title">Expandable Menus: Pull-Down, Square, or Pie?</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Raluca Budiu </span> · <span class="related-content-duration body-small">9 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Top 10 Enduring Web-Design Mistakes" href="/articles/top-10-enduring/?lm=drop-down-menus&pt=article"> <p class="related-content-title">Top 10 Enduring Web-Design Mistakes</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Amy Schade, Yunnuo Cheng, and Samyukta Sherugar </span> · <span class="related-content-duration body-small">9 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Visual Indicators to Differentiate Items in a List" href="/articles/visual-indicators-differentiators/?lm=drop-down-menus&pt=article"> <p class="related-content-title">Visual Indicators to Differentiate Items in a List</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Aurora Harley </span> · <span class="related-content-duration body-small">6 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Navigation: You Are Here" href="/articles/navigation-you-are-here/?lm=drop-down-menus&pt=article"> <p class="related-content-title">Navigation: You Are Here</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Susan Farrell </span> · <span class="related-content-duration body-small">6 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Utility Navigation: What It Is and How to Design It" href="/articles/utility-navigation/?lm=drop-down-menus&pt=article"> <p class="related-content-title">Utility Navigation: What It Is and How to Design It</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Susan Farrell </span> · <span class="related-content-duration body-small">4 min</span> </p> </a> </li> </ul> </div> </div> </div> </section> </main> <footer class="footer"> <div class="wrapper row"> <div class="subscribe"> <h2 class="title-large">Subscribe to Our Newsletter</h2> <p class="body-medium">Get weekly UX articles, videos, and upcoming training events straight to your inbox.</p> <form class="form-validated" action="https://nngroup.us4.list-manage.com/subscribe/post?u=538d934a891681a5d850bb4e5&id=7f29a2b335" id="subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" > <div class="form-field"> <div class="outline"> <label for="newsletter-subscribe-email" class="label-medium">Email</label> <input autocomplete="email" class="body-small" id="newsletter-subscribe-email" placeholder="norman@gmail.com" name="EMAIL" type="email" value=""> </div> <div class="error-local"></div> </div> <input class="button-fill button-small" name="subscribe" type="submit" value="Subscribe"> </form> </div> <div class="follow"> <h2 class="title-large">Follow Us</h2> <ul> <li class="label-large"> <a href="https://www.linkedin.com/company/nielsen-norman-group"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-linkedin.svg" alt=""> LinkedIn </a> </li> <li class="label-large"> <a href="https://www.instagram.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-instagram.svg" alt=""> Instagram </a> </li> <li class="label-large"> <a href="https://www.youtube.com/channel/UC2oCugzU6W8-h95W7eBTUEg"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-youtube.svg" alt=""> Youtube </a> </li> <li class="label-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup "> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-podcast.svg" alt=""> Podcast </a> </li> <li class="label-large"> <a href="https://twitter.com/nngroup"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-x.svg" alt=""> X (Twitter) </a> </li> <li class="label-large"> <a href="https://www.facebook.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-facebook.svg" alt=""> Facebook </a> </li> </ul> </div> </div> <section class="navigation"> <div class="wrapper"> <ul> <li><span class="title-small">Certification</span> <ul> <li class="body-large"> <a href="/ux-certification/">What is UX Certification?</a> </li> <li class="body-large"> <a href="/ux-certification/specialties/">Specialties</a> </li> <li class="body-large"> <a href="/ux-certification/exams/">Exams</a> </li> <li class="body-large"> <a href="/ux-certification/people/">UX Certified People</a> </li> </ul> </li> <li> <span class="title-small">UX Training</span> <ul> <li class="body-large"> <a href="/courses/">All Live Courses</a> </li> <li class="body-large"> <a href="/training/live-courses/">About Live Courses</a> </li> <li class="body-large"> <a href="/team-training/">Private Team Training</a> </li> <li class="body-large"> <a href="/course-calendar/">Course Calendar</a> </li> </ul> </li> <li> <span class="title-small">Consulting</span> <ul> <li class="body-large"> <a href="/consulting/expert-review/">Expert Review</a> </li> <li class="body-large"> <a href="/consulting/user-testing/">User Testing</a> </li> <li class="body-large"> <a href="/consulting/user-research/">Customized Research</a> </li> <li class="body-large"> <a href="/consulting/applied-workshops/">Applied Workshops</a> </li> <li class="body-large"> <a href="/consulting/keynote-speaking/">Keynote Speaking</a> </li> </ul> </li> <li> <span class="title-small">Free Guidance</span> <ul> <li class="body-large"> <a href="/articles/">Articles & Videos</a> </li> <li class="body-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup">The NN/g UX Podcast</a> </li> </ul> </li> <li> <span class="title-small">About</span> <ul> <li class="body-large" > <a href="/about/why-nng/">Why NN/g</a> </li> <li class="body-large" > <a href="/about/">About Us</a> </li> <li class="body-large" > <a href="/people/">People</a> </li> <li class="body-large" > <a href="/about/about-client-list/">Clients</a> </li> <li class="body-large" > <a href="/about/contact/">Contact</a> </li> <li class="body-large" > <a href="/return-policy/">Return Policy</a> </li> </ul> </li> </ul> </div> </section> <div class="copyright"> <div class="wrapper"> <p><a href="/copyright-and-reprint-info/">Copyright</a> © 1998-2025 Nielsen Norman Group, All Rights Reserved. </p> <ul> <li id ="cookie-preferences"><a class="cookie-button">Cookie Preferences</a></li> <li><a href="/cookie-declaration/">Cookie Declaration</a></li> <li><a href="/privacy-policy/">Privacy Policy</a></li> </ul> </div> </div> </footer> <button class="back-to-top" aria-label="Back to top"><span class="text"><span class="fas fa-caret-up arrow" aria-hidden="true"></span><br>Top</span></button> <script src="https://media.nngroup.com/static/js/output.4573ebdb8665.js" defer></script> <script src="https://media.nngroup.com/static/js/article-detail.7e820ce13132.js"></script> <script> window.addEventListener('CookiebotOnAccept', function (e) { Cookiebot.consent.preferences&&window.dataLayer.push({event:"cookieconsent_preferences"}); Cookiebot.consent.statistics&&window.dataLayer.push({event:"cookieconsent_statistics"}); Cookiebot.consent.marketing&&window.dataLayer.push({event:"cookieconsent_marketing"}); }); window.addEventListener('CookiebotOnDecline', function (e) {}); </script> </body> </html>

CINXE.COM

Dropdowns: Design Guidelines