Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

Designing Drop-Down Menus: Examples and Best Practices

Advertisement

As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

Yes, that’s right: drop-down navigation menus can be user-friendly. Just yesterday Jacob Nielsen the results of his recent drop-down menus study1, in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the user’s choices with effective use of typography, icons, and tooltips.

These panels appear temporarily and disappear on their own when users move the pointer to another top-level option or to a “regular” part of the screen. You can find more information about Nielsen’s study in his article Mega Drop-Down Navigation Menus Work Well2.

Screenshot3
Huge vertical drop-down panel from foodnetwork.com4; notice a close button (the “x” in the upper right corner).

In this article we take a closer look at the nature of drop-down navigation menus, analyze situations in which they should or should not be used, discuss various implementations and finally showcase a couple of bad and good examples of such menus. The article also includes various tips and suggestions to help you work with your drop-down menus.

Where To Use Drop-Down Menus Link

You will often see many trends in which drop-down menus are used. Here are a few of the most common ones.

Organize Pages in a Section
Most commonly, drop-down menus are used to pull all of the pages in a certain category together in one organized element. This is essentially sub-navigation. Take a look at the design below. A drop-down element contains all of the different categories for a certain section of the website.

Screenshot

Organize Categories in a Blog
You will see many blogs use a drop-down menu to organize categories and tags. Why? Blogs are driven by a large amount of information, so the layout needs to be as clean as possible to hold that content. A drop-down menu ultimately helps pull together links, such as categories, out of layout elements, such as the sidebar.

Screenshot5

Show Products on an eCommerce Website
You will see many e-commerce websites use drop-down menus to show products or categories of products. The drop-down menu is a friendly feature that all consumers can easily figure out, so it is a perfect way to organize products. The Best Buy website, shown below, does just this.

Screenshot6

Display Modules
A drop-down can be an excellent way to tuck away an obstructive menu, which the user can click on to reveal. Take the example below, for instance. The sign-in element is part of the navigation, then appears in the form of a drop-down. This is a great way to take this large element out of the layout without negatively impacting usability.

Screenshot7

Best Practices Link

Drop-down menus do in fact organize content into small, uncluttered elements, but if not done correctly, they can be just as bad as a messy layout. Here are some ways to make this controversial element more usable.

Avoid a Drop-Down with More than Two Levels
Overall, this is just about the worst mistake one could make with drop-down menus in terms of usability. If done with a hover menu structure, the user will lose focus of the menu whenever the mouse pointer moves away from it. If done with a clickable structure, it has too many buttons and doesn’t work nicely.

The website shown below makes this mistake. The menus are very difficult to use because if you even slightly lose focus of the menu with the mouse pointer, you have to start from the top. Notice the tooltip, which also gets in the way of the navigation.

Screenshot

Option 1: Hover Menu
Basically, there are two ways to approach the drop-down menu: with either a hover or a click to activate the menu. From a design and convenience standpoint, a hover menu is better.

Option 2: Clickable Menu
On the other hand, many will argue that a clickable menu is better because it is much more usable. Reason? Because of the way a hover menu is constructed, the user has to have the pointer over the menu at all times. If the user loses focus of the hover menu, it closes. Therefore, it is better to go with a drop-down menu that is activated by clicking a button, then deactivated by clicking the button once more.

CSS-Tricks has a tutorial showing how to create a layout similar to that of Digg. It is a perfect drop-down menu with a click-to-activate/deactivate feature, so it’s certainly something you should take a look at.

Screenshot8

Also, Google features a usable drop-down menu using the click on/off trick.

Screenshot9

Delay the Deactivation of a Hover
Avoiding a hover structure and many levels in a drop-down may be too much of a restriction for the navigation you are trying to create. There is a solution, though, that can improve the usability of a hover and multi-level menu. With most menus, the drop-down disappears immediately after the user moves the mouse pointer away from the menu. The solution is to delay its disappearance. Or, have a click function that requires users to click outside the menu area to close the drop-down, similar to how a Lightbox functions.

Take Dell, for example. It uses a multi-level drop-down menu, but it is still somewhat usable. This is the only exception to the use of multi-level drop-down menus.

Screenshot10

Furthermore, the menu on the Porsche website has multiple levels. However, the menu has a very wide focus range. This means you have to move your pointer a certain distance away from the menu to close it.

Screenshot11

Add a Hover Effect to Menu Options
The navigation itself actually affects the usability of the drop-down menu. One way to make the menu work better with the drop-down is to add a hover effect to the menu options. This shows exactly which button in the navigation the menu is extending from, which will certainly help users.

The example below, the MediaTemple home page, shows a strong hover effect on the navigation options, which helps to support the drop-down menu.

Screenshot12

Seamless Transitions
When a drop-down menu appears, it should appear seamlessly and without interruption. The menu should load immediately. Many websites make the mistake of making the menu so “heavy” that it takes more than an instant to load upon the hover.

Transition effects are one more detail that can look really cool. Instead of the menu simply appearing, try throwing in a wipe down or fade in. Just be sure to make the transition quick and not disruptive.

You will notice that Microsoft doesn’t do a very good job of creating a seamless menu. Observe the image below closely. You will notice that outlines from adjacent menus are still visible when the main menu is loading. When you move from button to button in the navigation, the drop-down menus have a slight lag, which looks bad. Of course, this doesn’t occur in all browsers, but it shouldn’t occur in any.

Screenshot13

Remove Tooltips
Of course, when designing drop-down menus, there are always little details that impact usability. One important practice you may overlook is the presence of tooltips, or the lack of tooltips. You should always remove tooltips from buttons with drop-down menus. Reason? Tooltips just get in the way and sometimes even block the first list item in the drop-down menu.

Yes, we will be picking on Microsoft once more. Microsoft makes this mistake on its corporate page. Notice how the tooltip blocks many of the list items, which makes navigation that much more difficult.

Screenshot14

Styling Techniques Link

Content backgrounds can be somewhat of a challenge, too. The background has to be subtle, or it will ruin the content. Here are a few ways to liven up content backgrounds without going over the top.

Use a Clean List
Not only is the element styling important, but the content styling is important, too. Clean typography and a readable list are important. Use smart spacing between elements in the list, and add a border above and below list items.

The example below from Audi shows a very well-organized and readable list. The list items are separated, and there are even list item icons.

Screenshot15

On the other hand, The Washington Post’s website has a very poor list in the drop-down menu. There is not enough spacing between list items, so the menu is very cluttered and difficult to use.

Screenshot16

Hover Effects on List Items
All buttons need some sort of hover effect to be more usable. In drop-down menu lists, apply subtle hover effects, perhaps just a text color or background change. The White House website uses only a background change on list items, but it still helps the user.

Screenshot17

Semi-Transparent Background
This won’t work for all designs, but you should consider a semi-transparent background for the menu. The website shown below has a transparency, so the user can still see through to the image background. The key to semi-transparent elements is to keep a strong and readable contrast.

Screenshot18

Keep Styling Consistent with Menu
You will hear everywhere that consistency in styling is a must, and it certainly is. For navigation and a drop-down menu to work together as one unit, as they should, the styling needs to be similar. Use the same fonts and a similar background.

In the example below, the drop-down menu looks as it should.

Screenshot19

Poorly Constructed Menus Link

Below are some examples of drop-down menus that fall short somewhere with styling and usability.

Navigant Consulting20
This menu is poorly styled and dysfunctional.

Screenshot21

Panasonic22
Although this menu is well-styled, it is difficult to use because of a bad hover effect.

Screenshot23

Toshiba24
The Toshiba menu is too small and does not follow good styling practices.

Screenshot25

LG26
Like the Microsoft menu above, this one has a slight lag, which makes it hard to use.

Screenshot27

Chrysler28
The Chrysler page uses a drop-down menu with very small text, which makes it difficult to read.

Screenshot29

Sun30
These drop-down menus are rather fidgety and hard to use. The tooltip gets in the way, too, and directly above the main navigation is another drop-down menu. All of this makes it very difficult to navigate.

Screenshot31

Creative Labs32
The menu below is cluttered and does not have a delayed hiding or similar technique, so it is not very usable.

Screenshot33

HP34
Another hover menu that lacks usable features.

Screenshot35

Alienware36
The black menu on the black design makes this drop-down difficult to use.

Screenshot37

Good Drop-Down Menus Link

Here are many drop-down menus that have good usability and styling features.

Sony38
A well-constructed hover menu with a good list.

Screenshot39

ActionEnvelope40
A clean vertical drop-down panel with a lot of padding; notice, how the panel appear to be above other design elements. Simple and beautiful solution.

Screenshot41

Helmy Bern42
A beautifully styled menu, with a fade transition.

Screenshot43

RedBrick44
This menu is cleanly styled and very readable.

Screenshot45

REI46
This drop-down is very wide, so it is easy to keep the mouse in focus.

Screenshot47

Philips48
Philips has a large and usable drop-down module.

Screenshot49

Walmart50
On the Walmart site, the user clicks on the area outside the menu to close it.

Screenshot51

Samsung52
The Samsung menu is usable because of its large size and styling.

Screenshot53

Epson54
Epson shows another usable drop-down menu.

Screenshot55

Mini Cooper56
This website uses a drop-down menu with delayed closing.

Screenshot57

Gateway58
Here is another usable drop-down element.

Screenshot59

Asus Global60
A well-styled menu that has delayed hiding.

Screenshot61

Intel62
A very clean drop-down menu.

Screenshot63

Target64
A well-organized menu that has delayed closing.

Screenshot65

Garmin66
This drop-down menu is simple yet functional.

Screenshot67

Logitech68
A drop-down with very nice styling that matches the menu.

Screenshot69

Incase70
This menu is very basic but serves its purpose.

Screenshot71

evelMerch72
A small yet functional drop-down, with a graphic to show users that the button opens a menu.

Screenshot73

IBM74
A multi-level drop-down is used here, but a slight delay makes this one easier to use.

Screenshot75

EA76
A very clean and well-organized drop-down element.

Screenshot77

Please consider visiting the following related posts:

(al)

Footnotes Link

  1. 1 http://www.useit.com/alertbox/mega-dropdown-menus.html
  2. 2 http://www.useit.com/alertbox/mega-dropdown-menus.html
  3. 3 http://www.foodnetwork.com/
  4. 4 http://www.foodnetwork.com
  5. 5 http://www.gomediazine.com/
  6. 6 http://www.bestbuy.com/
  7. 7 http://collabfinder.com/
  8. 8 http://css-tricks.com/designing-the-digg-header-how-to-download/
  9. 9 http://www.google.com/
  10. 10 http://www.dell.com/
  11. 11 http://www.porsche.com/usa/
  12. 12 http://mediatemple.net/
  13. 13 http://www.microsoft.com/en/us/default.aspx
  14. 14 http://www.microsoft.com/en/us/default.aspx
  15. 15 http://www.audi.de/de/brand/de.html
  16. 16 http://www.washingtonpost.com/
  17. 17 http://www.zensender.com/
  18. 18 http://www.august.com.au/
  19. 19 http://mac.appstorm.net/
  20. 20 http://www.navigantconsulting.com/
  21. 21 http://www.navigantconsulting.com/
  22. 22 http://www.panasonic.com/
  23. 23 http://www.panasonic.com/
  24. 24 http://www.toshiba.com/tai/index.jsp
  25. 25 http://www.toshiba.com/tai/index.jsp
  26. 26 http://www.lge.com/us/index.jsp
  27. 27 http://www.lge.com/us/index.jsp
  28. 28 http://www.chrysler.com/en/#
  29. 29 http://www.chrysler.com/en/#
  30. 30 http://www.sun.com/
  31. 31 http://www.sun.com/
  32. 32 http://us.creative.com/welcome.asp
  33. 33 http://us.creative.com/welcome.asp
  34. 34 http://www.shopping.hp.com/webapp/shopping/store_access.do?template_type=landing&landing=notebooks
  35. 35 http://www.shopping.hp.com/webapp/shopping/store_access.do?template_type=landing&landing=notebooks
  36. 36 http://www.alienware.com/
  37. 37 http://www.alienware.com/
  38. 38 http://www.sony.com/index.php
  39. 39 http://www.sony.com/index.php
  40. 40 http://www.actionenvelope.com/
  41. 41 http://www.actionenvelope.com/
  42. 42 http://www.helmy-bern.cz/
  43. 43 http://www.sony.com/index.php
  44. 44 https://www.redbrickhealth.com/
  45. 45 https://www.redbrickhealth.com/
  46. 46 http://www.rei.com/
  47. 47 http://www.rei.com/
  48. 48 http://www.usa.philips.com/index.page
  49. 49 http://www.usa.philips.com/index.page
  50. 50 http://www.walmart.com/
  51. 51 http://www.walmart.com/
  52. 52 http://www.samsung.com/us/
  53. 53 http://www.samsung.com/us/
  54. 54 http://www.epson.com/cgi-bin/Store/jsp/index.do
  55. 55 http://www.epson.com/cgi-bin/Store/jsp/index.do
  56. 56 http://www.miniusa.com/
  57. 57 http://www.miniusa.com/
  58. 58 http://www.gateway.com/
  59. 59 http://www.gateway.com/
  60. 60 http://www.asus.com/index.aspx
  61. 61 http://www.asus.com/index.aspx
  62. 62 http://www.intel.com/business/index.htm?iid=gg_work+home_business
  63. 63 http://www.intel.com/business/index.htm?iid=gg_work+home_business
  64. 64 http://www.target.com/
  65. 65 http://www.target.com/
  66. 66 http://www.garmin.com/garmin/cms/site/us
  67. 67 http://www.garmin.com/garmin/cms/site/us
  68. 68 http://www.logitech.com/
  69. 69 http://www.logitech.com/
  70. 70 http://goincase.com/
  71. 71 http://goincase.com/
  72. 72 http://www.evelmerch.com/
  73. 73 http://www.evelmerch.com/
  74. 74 http://www.ibm.com/us/en/
  75. 75 http://www.ibm.com/us/en/
  76. 76 http://www.ea.com/
  77. 77 http://www.ea.com/
  78. 78 https://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
  79. 79 https://www.smashingmagazine.com/2009/03/09/slideshows-in-web-design-when-and-how-to-use-them/
  80. 80 https://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
  81. 81 https://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/
  82. 82 https://www.smashingmagazine.com/2008/11/27/short-story-about-top-links/
SmashingConf Oxford

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

Advertisement
  1. 1

    wow great post.. really informative ..

    2
  2. 2

    Nice stuff, but could we get a Smashing tut on how to get MS IE to get off its pasty ass and display those dropdown frakkers properly? Without javascript or flash? Y’know, like every other browser out there does?

    0
  3. 3

    Tedwick, why don’t you get off your pasty ass and figure it out.

    2
  4. 4

    Thanks Matt for optimized showcase. If you would have included some tutorials for Multilevel Drop Down Navigation Menus than it’s handy with your collection for a complete post package lovers.

    I personally don’t use multi-level drop downs as they are HTML evil incarnate! If you find yourself in a situation where you have no choice, you took a wrong turn somewhere and need to go back and retrace your steps.

    Anyway.. Still, a nice round-up you got here.

    DKumar M.

    0
  5. 5

    Ryan says – “Tedwick, why don’t you get off your pasty ass and figure it out.”

    Nice one. :D

    The idea of having a dropdown is really good because it makes things look neat and clean. Thanks for the post!

    1
  6. 6

    Great post… i’m inspired… thanks

    0
  7. 7

    Great variety. It’s interesting to see how sites with a bunch of categories/sub categories handle their dropdowns.

    0
  8. 8

    @DKumar: there are various previous posts in the magazine which has a list of some great tutorials on drop down menus…maybe you missed those… use the search bar on top of the page.. you’ll find them… :)

    0
  9. 9

    It is always a pleasure to read SM articels. Thank you very much.

    0
  10. 10

    Really great post :) Thanks

    0
  11. 11

    ESPN.com’s drop-down menus annoy the hell out of me. They really need a hover delay … everytime my mouse brushes over them to a link I want to click on they’re popping up all over the place.

    grrrr.

    0
  12. 12

    As for the drop-down menus that have about a zillion choices, how can you call that good UI? I’d call it lazy UI. If you can’t make your interface simple, you haven’t worked at it enough. By publishing these as examples of good drop-downs, Smashing has endorsed them. That surprises me.

    0
    • 13

      I run a web retail site with 5000 unique item profiles. Dropdowns are the only practical way for customers to find exactly what they want, otherwise they just go away if they have to click more than a couple times to get where they want.

      1
  13. 14

    Its a super post.

    -2
  14. 15

    Hey whats the Problem with “Navigant Consulting”??? Dropdown is working without problems.

    Someone just didn’t wait for the background to be loaded?! Thats poor.

    0
  15. 16

    The best way to use drop down menus is to not use them at all, I think. Tabs and submenus work better, like my blog jenst.se, or another example: WordPress.

    -2
  16. 17

    Once again a very useful atricle. Just noticed though that the link on the whitehouse website thumbnail leads to zensender not sure if this was intended?

    -1
  17. 18

    Also see the dropdown menu of Magix

    -2
  18. 19

    This article is one week too late :) From week, i am coding multi-column dropdown menu from zero. Now it works well in ie6/7, mozilla etc.

    …but here i have a lot of good inspiration (and code). Uhhh :)

    -2
  19. 20

    I feel drop down menus restrict the wrist movements. They should turn a bit left while going down with increasing slope if more rows-responsive middle wheel if possible. Also the vertical should be as low as possible.

    -2
  20. 21

    Nice article, I’ve just rewritten for personal purposes the Porsche menu with semantic html, css and Jquery.
    Am I allowed to post a link to my article here?

    0
  21. 22

    Very comprehensive article guys! I’ve considered using drop down menu’s to save space many times but never actually used one!

    0
  22. 23

    The author claims one menu to be poor because of a small text size and in the same size another one is a good example while the text size is the same. I don’t think you have clear judgment there or at least you can’t argument yourself ergo your opinion is useless

    1
  23. 24

    I want to ask something, How to make Menu Semi-Transparent Background? it’s using transparent image or something? I’ve been try with png files, it can works in Firefox only. Anyone can help me?

    0
  24. 26

    Hi,
    Anyone knows a link to download the sample of mega menu?

    thanks

    0
  25. 27

    Great article.
    I will keep all these advices in mind for one of my next project… well, it will be better if I’ll read this article again when I’ll start the project :)

    0
  26. 28

    Great post. And great to see Misery Signals getting a nod anywhere on the internet!

    0
  27. 29

    I’m happy to have a website simple enough to avoid the use of drop-down menus. :3

    Personally I don’t really like hiding information like this, I prefer it all visible even though it might get cluttered, and will also require some clever thinking to solve this problem.

    -1
  28. 30

    Absolutely great article. I love this.

    0
  29. 31

    Well done to Google ad Media Temple being the ones I could find from that list who actually had keyboard access for their drop down menus.

    Unfortunately a lot of people just don’t consider keyboard access from either an accessibility or just plain user preference point of view.

    So well done to them :) An Interesting collection here.

    0
  30. 32

    Very nice post! very usefull as usual !! Well done Matt Cronin and thanks :D

    0

↑ Back to top