Horizontal Navigation Menus: Trends, Patterns And Best Practices

Advertisement

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.”

2
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

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:

4
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:

6
Deliciouslyorkshire7

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:

8
Designers Couch9

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”).

10
J Taylor Design11

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:

12
Sharify13

14
Xero15

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:

16
Washtenaw Community College17

18
Westcoast Poppin19

Avoid “Surprise” Drop-Down Menus

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:

20
QN5 Music21

22
Kinder-aktuell23

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

24
webstudios25

26
billoneil.com27

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

28
Owltastic29

30
inkd31

Horizontal Navigation Without Bar

32
Full Cream Milk33

34
My Favorite Thing35

Horizontal Navigation Below Primary Page Header

36
The Mindset Game37

38
Lanbruk’s Gunya39

Horizontal Navigation with Icons and Text

40
Mission Bicycle Company41

42
Glocal Ventures43

44
Twitshirt45

46
Render47

48
Auditude49

Semi-Transparent Horizontal Navigation Bar

50
Wetaskiwin Regional Public Schools51

52
Eyemagine53

54
Jupiter Underfloor Heating55

56
Cambridge Shakespeare Festival57

58
Arca lui Noe Hotel59

60
The Art of Non-Conformity61

Horizontal Navigation at Bottom

62
Lorem Ipsum63

Conclusion

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

(al)

Footnotes

  1. 1 http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/
  2. 2 http://impulsedevelopment.com/
  3. 3 http://impulsedevelopment.com/
  4. 4 http://www.ehjoinery.com/
  5. 5 http://www.ehjoinery.com/
  6. 6 http://www.deliciouslyorkshire.co.uk/
  7. 7 http://www.deliciouslyorkshire.co.uk/
  8. 8 http://www.designerscouch.org/
  9. 9 http://www.designerscouch.org/
  10. 10 http://www.thejtsite.com/
  11. 11 http://www.thejtsite.com/
  12. 12 http://www.sharify.it/
  13. 13 http://www.sharify.it/
  14. 14 http://www.xero.com/
  15. 15 http://www.xero.com/
  16. 16 http://www.wccnet.edu/
  17. 17 http://www.wccnet.edu/
  18. 18 http://westcoastpoppin.com/
  19. 19 http://westcoastpoppin.com/
  20. 20 http://qn5.com/
  21. 21 http://qn5.com/
  22. 22 http://www.kinder-aktuell.de/
  23. 23 http://www.kinder-aktuell.de/
  24. 24 http://www.webstudios.co.nz/
  25. 25 http://www.webstudios.co.nz/
  26. 26 http://www.billoneil.com/
  27. 27 http://www.billoneil.com/
  28. 28 http://owltastic.com/
  29. 29 http://owltastic.com/
  30. 30 http://inkd.com/
  31. 31 http://inkd.com/
  32. 32 http://www.fullcreammilk.co.uk/
  33. 33 http://www.fullcreammilk.co.uk/
  34. 34 http://www.myfavoritething.it/
  35. 35 http://www.myfavoritething.it/
  36. 36 http://themindsetgame.com/
  37. 37 http://themindsetgame.com/
  38. 38 http://www.lanbruk.com.au/
  39. 39 http://www.lanbruk.com.au/
  40. 40 http://www.missionbicycle.com/
  41. 41 http://www.missionbicycle.com/
  42. 42 http://glocalventures.com/
  43. 43 http://glocalventures.com/
  44. 44 http://twitshirt.com/
  45. 45 http://twitshirt.com/
  46. 46 http://www.rendercreative.com/
  47. 47 http://www.rendercreative.com/
  48. 48 http://www.auditude.com/
  49. 49 http://www.auditude.com/
  50. 50 http://www.wrps.ab.ca/
  51. 51 http://www.wrps.ab.ca/
  52. 52 http://www.eyemaginetech.com/
  53. 53 http://www.eyemaginetech.com/
  54. 54 http://www.jupiterunderfloorheating.com/
  55. 55 http://www.jupiterunderfloorheating.com/
  56. 56 http://www.cambridgeshakespeare.com/
  57. 57 http://www.cambridgeshakespeare.com/
  58. 58 http://www.hotelarcaluinoe.ro/
  59. 59 http://www.hotelarcaluinoe.ro/
  60. 60 http://chrisguillebeau.com/3x5/
  61. 61 http://chrisguillebeau.com/3x5/
  62. 62 http://www.loremipsum.ro/
  63. 63 http://www.loremipsum.ro/
  64. 64 http://www.balkhis.com/web-designs-resources/20-stunning-examples-of-horizontal-navigation-menus/
  65. 65 http://html.cita.illinois.edu/nav/menu/menu-example-hrzt.php
  66. 66 http://patterntap.com/usersets/set/686
  67. 67 http://ui-patterns.com/pattern/HorizontalDropdownMenu
  68. 68 http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/

↑ 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.

Advertisement
  1. 1

    @Josh:

    Yes, that’s correct. How would they remember there was a dropdown menu there, if there is no indication of it? Of course, some might disagree. But keep in mind that even a split-second of negative thinking on a user’s part will harm their experience on a site. I would personally rather not take that chance. How hard is it to add a triangle? :)

    0
  2. 52

    nice tips, I’ld add that you should use tabs (popular trend) only when it’s appropriate. which means when it’s the navigation of a same section but on sublevels. the selected tab must be recognizable from the others and match with the current section.
    Hope it helps.

    0
  3. 103

    .mainli:hover li {
    display: block
    }
    .mainli:hover {
    background: gray
    }

    Main Tab

    Sub
    Sub

    Main Tab
    Main Tab
    most of sites that make mistake about drop down menu using only first of css codes above. and they set sub element and main tab as different elements. sub element must be inside of its parent. Basic drop-down structure must be like this example.

    0
  4. 154

    @Matt Rolf:

    Yes, you’re correct about what that article on CNN’s nav change discusses, however, I was pointing out that they recognized the limitations of vertical navigation, which is why they switched. I probably should have linked the words “switching from vertical to horizontal” rather than “discovered those limitations”, which would have been more accurate from an anchor text perspective.

    0
  5. 205

    mimojito (aka Efrten)

    September 21, 2009 10:32 am

    I love the article except for the issue of “surprise menus.” Users are not as surprised by surprise menus as you may think. Users have come to accept that navigation menus have an interactive quality to them. Regardless of whether or not there is a carrot or arrow informing us that there is “more” to the link is redundant.

    A User will become more frustrated with a menu item that does nothing at all than with a menu that actually does what they have been taught to expect.

    Aesthetically speaking, I DO believe that a carrot or arrow is useful to the navigation but it is not necessary.

    I am speaking strictly with regards to the main nav.

    0
  6. 256

    Thanks for sharing all these great examples!

    I myself as a designer have always preferred horizontal navigation to vertical, but each has its purpose. I really like the idea of split navigation, putting the secondary links into a vertical column on the left hand side.

    0
  7. 307

    Hi. As the front end developer for Deliciouslyorkshire can I add a little weight to the reasoning behind the top tier tabbed navigation. The “About”, “Home” and “News and Events” tabs, while they may seem secondary, it was very important for users to find these sections, fast. Part of the brief dictated that—users struggled to find information about Deliciouslyorkshire and their events and related stories. “Where to find/buy/stay” and “recipes” are just as important and were given the same hierarchical value in site planning.

    Secondary and tertiary links are clear, using a sub navigation and lower prominence links in the header section.

    0
  8. 358

    @Liam

    Thanks for that note. You’ll notice that the article did state that the developer of the site may have had compelling reasons for designing it that way. It was more of a case study, and not necessarily assuming bad practice on your part.

    1
  9. 409

    nice article thanks
    loading bars

    0
  10. 460

    About the “Clearly Distinguish Primary And Secondary Sections”

    There is, I think, a beautiful example of this on http://www.vakantieshop.nl. The twist in the nav-bar, with still using the tabs works quite well, it makes it clear the right two items are not as important as the ones on the left, yet still the nav bar incorporates them in the small space left. It’s one of the better examples of a proper nav-bar I have seen the last few months.

    0
  11. 511
  12. 562

    Thanks for that note. You’ll notice that the article did state that the developer of the site may have had compelling reasons for designing it that way.http://www.hlf-dr.com.tw

    -2
  13. 613

    One of reasons, that I feel, why Horizontal Menus have been the most favored among designer, is the reading pattern of the English Language – that is Left to Right. Also, something that holds of utmost importance is visibility at the top and Horizontal Menu does justice to the approach. Thanks Louis for sharing such a valuable post.

    1
  14. 664

    Sebastian Scaramuzza

    May 15, 2013 7:38 am

    Greeeat article, thanks. :-)

    0
  15. 715

    It’s actually a knowledge full post. Thanks to shear. This post has removed a number of wrong things.

    0

↑ Back to top