Menu Search
Jump to the content X X
Smashing Conf San Francisco

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. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Horizontal Navigation Menus: Trends, Patterns And Best Practices

The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. The dominance of horizontal navigation over vertical (i.e. down a sidebar) is obviously due to the design and content limitations of the latter. Notably, CNN discovered those limitations1 before switching from vertical to horizontal a few years back.

There are, however, many styles of horizontal navigation in modern Web design. Some offer usability advantages for certain types of websites, while others are aesthetically better.

In this article, we will focus on a variety of techniques and best practices to improve the usability of horizontal navigation bars, and we will note less effective styles. We’ll also look at several trends that developers can choose from when working on the navigation design for their next project.

Let’s start off with a usability tip that applies to any navigation bar. When a user visits a new website, one of their primary points of focus will be the navigation bar. If that element has been well designed, the user will look to it first for help with their task. Almost every website has certain sections that are “expected” by users, such as “About us,” “Services,” “Products,” and “Contact us.”

Impulse Development3

Because of the nature of the Web, users get frustrated if they cannot immediately find the content they are looking for, even if the delay is momentary. So, the “About” link should be labeled “About” or “About us.” The “Services” link should be labeled “Services” or “Our services.” Being creative in this case detracts from usability.

Except in the most unusual circumstances, don’t call your “About” page “Company info.” Don’t call your “Services” page “What we do.” And don’t call your “Contact” page “How to reach us.” Users instantly look for recognizable terms when searching for content, and so avoiding any design or content that would slow them down ensures for them a positive experience.

Clearly Distinguish Primary And Secondary Sections Link

Once you figure out what parts of your website are “primary” and what parts are “secondary,” you can establish a visual hierarchy that enhances usability.

Primary links (e.g. “About,” “Services,” etc.) should be clearly distinguishable from secondary page links, which are usually accessible from every page and located near the primary links. The designer’s job is to clearly indicate the difference so that users understand which parts of the website have the most important information.

Consider the following example:

Edwards & Hampson5

Edwards & Hampson’s website has a nice clear horizontal bar that serves as the user’s primary means of navigating pages. While it includes the standard links (“About us,” “Our services,” “Products”), the bar has a number of other links that are not as “primary” but are important enough to include in a prominent area.

A similar example:


The Deliciouslyorkshire website links to primary sections (“Home,” “About,” “News and events”) next to what seem to be secondary sections (“Recipes,” “Promotions,” “Useful links”). Both types of links have the same tabbed style, with no indication of hierarchy.

If, in fact, some of these links are less important, then designing the section to reflect this hierarchy would have been wise. Of course, these companies may have compelling reasons for designing their navigation in this way, so these are not necessarily bad examples; they serve merely as case studies to illustrate the importance of a visual hierarchy in navigation bars.

Conversely, here are two examples of websites that show this visual distinction but still keep secondary links easily accessible:

Designers Couch

Designer’s Couch has primary navigation links along the main bar (“Home,” “Gallery,” “Jobs,” etc.) and then secondary links on the same bar to the right but kept visually distinct (“Find a designer,” “Get involved”).

J Taylor Design9

J Taylor Design makes a similar distinction by placing secondary links below the main navigation bar and using a different color, font, and size. In these examples, the user has no trouble distinguishing between primary and secondary sections. Yet, the secondary links are not buried on the page or in drop-down menus. They’re still easy to access.

If you’re building an e-commerce website or one that has shopping cart functionality, user registration or log-in, then putting links to those sections on the right side of the horizontal navigation bar (or somewhere else on the right, near the top) is best.

Here are a few examples of websites that visually separate “action” links, while keeping them in the main navigation bar:



Sharify and Xero, above, put their “action” links on the same navigation bar as their primary links. But they maintain the hierarchy by pushing the secondary links to the far right.

Users expect to see these action links on the right side of the bar, so reversing the pattern would impair usability.

Another common practice that improves usability is to include a search box on the right, as part of the navigation bar. The search box is like the functions mentioned earlier because it requires some sort of unique action from the user.

Users are accustomed to seeing this action-oriented functionality — including the search box — on the right side of the page, so allow sufficient room in this part of your design for a search bar, inside the main navigation bar if possible.

The J Taylor Design website above puts its search box on the right side of the navigation bar, as do these:

Washtenaw Community College15

Westcoast Poppin17

Avoid “Surprise” Drop-Down Menus Link

Drop-down menus in horizontal bars are quite prevalent in modern design because they simplify cluttered layouts. Visually indicating whether a navigation link will reveal a drop-down menu when the user mouses over it is best practice. This is best accomplished with a simple downward-pointing triangle.

Below are some good examples of horizontal menus that visually indicate drop-down menus within them:

QN5 Music19


Unfortunately, many websites do not feature this simple yet effective marker. Below are a few examples of “surprise” drop-down menus:



Finally, here is a showcase of horizontal navigation bars, to give you an overview of the different styles on the Web and how they fit their layouts.

These examples do not necessarily represent best practices but are worth considering when designing your own horizontal navigation bar.

Tabbed Horizontal Navigation Link



Horizontal Navigation Without Bar Link

Full Cream Milk31

My Favorite Thing33

Horizontal Navigation Below Primary Page Header Link

The Mindset Game35

Lanbruk’s Gunya37

Horizontal Navigation with Icons and Text Link

Mission Bicycle Company39

Glocal Ventures




Semi-Transparent Horizontal Navigation Bar Link

Wetaskiwin Regional Public Schools47


Jupiter Underfloor Heating51

Cambridge Shakespeare Festival53

Arca lui Noe Hotel55

The Art of Non-Conformity57

Horizontal Navigation at Bottom Link

Lorem Ipsum59

Conclusion Link

The practices recommended in this article do not apply to every context and may not be right for every design, niche or industry. But they do highlight the need to give users a better experience and avoid potentially confusing navigational setups.

Web users usually behave based on learned habits. Creating a layout or pattern that unnecessarily disrupts those habits will only weaken your website’s conversion rates.

So, before you design a horizontal navigation menu, consider link names, section hierarchy and any other factors that could affect usability. In doing so, you will create a smooth user experience that allows visitors to find the information they want quickly and efficiently.

Further Reading Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64

↑ Back to top Tweet itShare on Facebook


Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

  1. 1

    Great round up…and great new sites to discover!

  2. 2

    Thanks for useful article. It has a lot of examples of horizontal menus.
    I would like to find out more about where logged in user menu should be placed?

  3. 3

    Really like idea behind the semi transparent menu… think this style of menu could be taken further… gret post as always… :)

  4. 4

    Just noticed that Mozilla isn’t following your advice about the drop down menu’s. I agree with you about this. Should be an arrow of some sort to indicate a dropdown menu is there. See here:

  5. 5

    It would be interesting to see a visual rhythm breakdown rather than just saying it exists nicely in a hierarchy. It’s really only Horizontal, Vertical, or weirdly organic image spliced things.

  6. 6

    Wow. You left out!

  7. 7

    sooo surprise menus are bad because?

  8. 8

    coz end-users hate surprises!!

  9. 9

    @josh: the user may get scared to death :)

  10. 10

    Nothing new… everybody knows that…..

  11. 11

    I’m pretty sure that first article you link to on CNN’s nav talks about the challenges and limitations of horizontal menus, not vertical menus.

  12. 12

    Surprise menus are bad because the users don’t see that there are more menu entries unless they click every menu entry! With a small marker you can make a user (me) very happy.

  13. 13

    The surprise menus point is valid but if that means putting markers say beside 7/8 top nav items, it just looks naff.
    I take umbrage at being told that “About us” or “Our Services” have an impact on usability, you cannot say we should use “About”, it doesn’t always make sense and may in fact mean a user has to click the link to find out.

  14. 14

    Jewen Soyterkijns

    September 7, 2009 5:42 am

    “SEO Articles” will do better in search egines than just “Articles”.
    “About our SEO” will do better in search engines than just “About”.
    “SEO Services” will do better in search engines than just “Services”.

    The biggest user of a website to keep happy is the owner of that website, the client who pays you money to have a site “out there”. With a correct SEO strategy users will not even use your navigation menu to navigate your site, but they will use Google to instantly find the content they were looking for on the site.

    Cookiecutter sites and standardised navigation can be usable and good for marketing, in most cases they produce generic looking sites that no one will give a second look.

  15. 15

    nice post!!!!!

  16. 16

    nice post! thank you!

  17. 17

    Useful article, much appreciated. Maybe nothing new for some of us, but a web site stands or falls with a good (or bad) navigation! Thank you, Louis.

  18. 18

    Mithun P Sreedharan

    September 7, 2009 7:32 am

    Nice article, Thanks!

  19. 19

    There is no such thing as a surprise menu if it is done correctly. Why do you need to know that it will drop down unless the category interests you? If, in the QN5 example, you were looking for an artist then you would have clicked on ‘Artists’ anyway. That it drops down and gives you a further choice before clicking can only be better and time saving! No surprise at all, well thought out IMHO.

  20. 20

    Nice collection but is there some tutorials how to make something like this?


↑ Back to top