Dropdown Menus
Best Practice: How to Implement Dropdown Menus
Before implementing dropdown menus, you have to ask yourself the vital question of “Will they be
the best way to organize the content of a webpage or application?”. Do not use dropdown menus
when:
• You wish to show the users where they are within the website or application. When providing the
user with such contextual information is important, use navigation tabs.
• The user would benefit from seeing the content of the individual menus together.
• When a category contains only one item.
Follow these steps for the implementation of dropdown menus:
1 At first, you must identify what your categories or dropdown menu titles are, which involves
reviewing your contents to establish common themes and links between items, options,
functions and site/application contents. For vertical dropdown menus, the number of sets of
options should be no greater than ten, due to the arrangement of menu titles side by side
and spanning the width of the user interface. This restricts the amount of space available for
presenting the menu titles and as (by their very nature) they drop down, you cannot stack
them one on top of the other.
[Continued on next page]
INTERACTION-DESIGN.ORG
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
[Continued from previous page]
2 After arranging these options into their appropriate groups, you should assign a logical and
fitting title to each category. This label must not be too long—so as to conserve the
available space along the panel or screen—nor so short that the clarity of the
content-defining term is sacrificed. Remember these labels are used to promote immediate
awareness of what the users will find when they select a menu item; using ambiguous or
unfamiliar terms can be confusing or misleading, wasting the users’ time when they
investigate the options offered in a menu.
3 Now, place the menu titles in a row and determine how to order them. Depending on the
situation, frequency of use can be an appropriate criterion. In other cases, an alphabetical
order can be useful. Obviously, you will not know for certain what will work best for your
users, so conducting some usability testing can be useful.
4 If you’re using a horizontal dropdown menu as well, now you should include some visual
indicator, such as the east-facing, black arrows in the example above, informing the user
that hovering the cursor over an option with extra options will reveal an associated
sub-category in a further dropdown menu. This new menu then appears to the right, with the
first possible selection now in line with the corresponding item in the original dropdown
menu.
5 Now you have decided what will be in the menus and the order of the items that will be
displayed, you must add some visual features that will help the user choose the intended
option. There are two main features that assist the users: firstly, the use of background color
to inform them which option will be selected according to the position of the cursor, and,
secondly, the implementation of a clear boundary around the dropdown menu so as to help
users isolate the group of available options from the rest of the user interface. Without some
visual indicator, the users might assume the cursor is over their desired option, when in fact
it is over a option.
[Continued on next page]
INTERACTION-DESIGN.ORG
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
[Continued from previous page]
5 [Continued from previous page]
Therefore, this simple addition to the dropdown menu design can help reduce error rates and
save the user from having to make annoying backward steps just to get back to the list of
options. A clearly defined boundary serves to reduce the potential inhibitory effects of the
surrounding information on an option’s selection. For example, a dropdown menu might
contain Times New Roman, 12-font text; also, if the list of options does not appear to be
separate from the rest of the display, similar text in the surrounding space could confuse the
user or slow down the selection process.
6 If you decide to use a mega dropdown menu, getting the visual aspects right involves using
headers and dividers so the user can immediately determine which category an individual
option belongs to. White space can also play an important part in helping the user identify
groups of options; so, include a small amount of this ‘dead’ space between different groups
to avoid confusion and keep the experience agreeable.
7 At this point, all of the visual aspects of the dropdown menu design should be in place; now,
you must choose the interactive elements of the design.
a. Firstly, should the dropdown list appear when the user simply hovers the cursor over the
category title? Or should the menu only appear when the user has clicked on the
category label? The former method saves the user from having to interact directly; the
latter ensures the menu does not appear unless the user expressly wants it to.
b. Also, you must decide whether the menu should disappear when the cursor is moved to
another region of the user interface. Again, removing the menu in this way saves the
user from interacting in order to return to the rest of the display. Even so, it can be
extremely frustrating if the user moves the cursor away without the intention of closing
the menu. Ways around this problem are listed in 'Potential Problems' below.
c. Finally, when the user clicks on an option, the menu should automatically disappear and
the associated content should open immediately.
INTERACTION-DESIGN.ORG
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
Do you want to learn more?
Learn how to use this template to your best advantage in our online course UI Design Patterns for
Successful Software. Sign up for it today and learn how you can create user interfaces that work
just right if you haven’t already started the course.
UI Design Patterns for Successful Software
Beginner course
User interface (UI) design patterns can be a designer’s best friend, allowing you to build excellent
user experiences with structure and speed. When used in the wrong way, however, they can quickly
lead to experiences that confuse your users... and no-one wants that! Our course UI Design
Patterns for Successful Software will equip you with the knowledge required to master UI design
patterns and secure them as one of the best attributes in your designer’s toolkit. You’ll be guided
through best practices relating to content organization, navigation, data entry, and social
integration—all with detailed templates that you can use in your daily work. You’ll also analyze and
critique popular websites to see how the best of the best utilize UI design patterns to achieve great
UX design. If you found this template useful, then this course is a treasure trove of resources and
guidance that will continue to enhance your knowledge of UI design.
Learn more about this course
INTERACTION-DESIGN.ORG
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
How to advance your career
with our online courses
Take online courses by Get a Course Certificate. Advance your career.
industry experts.
Your answers are graded by Use your new skills in your
Lessons are self-paced so
experts, not machines. Get existing job or to get a new
you'll never be late for class
an industry-recognized job in UX design. Get help
or miss a deadline.
Course Certificate to prove from our community.
your skills.
See all our courses
About the Interaction Design Foundation
With over 66,000 alumni, the Interaction Design Foundation is the biggest design school globally.
Industry leaders such as IBM and Adobe train their teams with our courses, and universities such
as MIT and the University of Cambridge include our courses in their curricula. Our online courses
are taught by industry experts and cover the entire spectrum of UX design from beginner to
advanced. We give you industry-recognized course certificates to advance your career. Since 2002,
we’ve put together the world’s biggest and most authoritative library of open-source UX Design
literature created by such noted authors as Don Norman and Clayton Christensen.
INTERACTION-DESIGN.ORG
Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
