Smashing Magazine - we smash you with the information that will make your life easier. really.

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

[By the way, did you know there is a brand new Smashing Wordpress Book? Push WordPress past its limits and take the basic blog into an entirely new blogosphere.]

Use Familiar Names For Links

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-nav in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Impulse Development

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:

Eh-nav in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Edwards & Hampson

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:

Dy-nav in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Deliciouslyorkshire

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:

Dc-nav in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
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”).

Jt-nav in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
J Taylor Design

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.

Put “Action” Links On Right

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-nav in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Sharify

Xero-nav in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Xero

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.

Include A Search Box

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-nav in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Washtenaw Community College

Wcp-nav in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Westcoast Poppin

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:

Dropdown-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
QN5 Music

Dropdown-03 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Kinder-aktuell

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

Dropdown-04 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
webstudios

Dropdown-02 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
billoneil.com

Various Trends And Styles

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

Tabbed-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Owltastic

Tabbed-02 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
inkd

Horizontal Navigation Without Bar

Whitespace-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Full Cream Milk

Whitespace-02 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
My Favorite Thing

Horizontal Navigation Below Primary Page Header

Navbelow-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
The Mindset Game

Navbelow-02 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Lanbruk’s Gunya

Horizontal Navigation with Icons and Text

Icons-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Mission Bicycle Company

Horizontal Navigation with Numbered Links

Numbered-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Glocal Ventures

Horizontal Navigation with Left-Aligned Link Text

Leftalign-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Twitshirt

Grouped Links Under Horizontal Navigation

Grouped-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Render

Grouped-02 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Auditude

Semi-Transparent Horizontal Navigation Bar

Transparent-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Wetaskiwin Regional Public Schools

Descriptive Text Under Horizontal Navigation Links

Textunder-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Eyemagine

Liquid-Width Horizontal Bar with Centered Links

Liquid-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Jupiter Underfloor Heating

Liquid-02 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Cambridge Shakespeare Festival

Horizontal Links Divided by Graphic

Divided-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Arca lui Noe Hotel

Divided-02 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
The Art of Non-Conformity

Horizontal Navigation at Bottom

Bottom-01 in Horizontal Navigation Menus: Trends, Patterns, and Best Practices
Lorem Ipsum

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)

Louis Lazaris is freelance web developer of Greek descent, based in Toronto, Canada. He runs Impressive Webs, (please, not another web design blog!) and the newly-launched Interviews by Design that posts interviews with talented designers. You can follow Louis on Twitter or contact him through his website.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4.00 out of 5)
Loading ... Loading ...

Tags: , ,

Advertising
  1. 1
    Tschai
    September 7th, 2009 3:24 am

    Great round up…and great new sites to discover!

  2. 2
    Spooler
    September 7th, 2009 3:37 am

    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
    Ash
    September 7th, 2009 3:39 am

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

  4. 4
    Bim
    September 7th, 2009 3:42 am

    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: http://bit.ly/Vit0

  5. 5
    Pasquale
    September 7th, 2009 3:43 am

    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
    mSquare
    September 7th, 2009 3:54 am

    Wow. You left out apple.com!

  7. 7
    Josh
    September 7th, 2009 4:05 am

    sooo surprise menus are bad because?

  8. 8
    Narendra
    September 7th, 2009 4:29 am

    @josh
    coz end-users hate surprises!!

  9. 9
    Andi
    September 7th, 2009 4:29 am

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

  10. 10
    chetan
    September 7th, 2009 4:36 am

    Nothing new… everybody knows that…..

  11. 11
    Matt Rolf
    September 7th, 2009 5:06 am

    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
    spritzstuhl
    September 7th, 2009 5:06 am

    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
    Darren Taylor
    September 7th, 2009 5:24 am

    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 7th, 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
    kpjothivelu
    September 7th, 2009 6:11 am

    nice post!!!!!

  16. 16
    desgaus
    September 7th, 2009 6:28 am

    nice post! thank you!

  17. 17
    Gerd Wippich
    September 7th, 2009 7:19 am

    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 7th, 2009 7:32 am

    Nice article, Thanks!

  19. 19
    Mike D
    September 7th, 2009 7:42 am

    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
    Hrasno
    September 7th, 2009 8:17 am

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

  21. 21
    Pedro
    September 7th, 2009 9:43 am

    Nice article, Thanks!

  22. 22
    David A
    September 7th, 2009 9:46 am

    Nicely done. Good points, good examples, and NOT overkill like so many posts here on Smashing. This is one I’ll be bookmarking. Thanks!

  23. 23
    JP
    September 7th, 2009 10:11 am

    Definitely going to my bookmarks, EXCELENT reference article for us web-oholics!

  24. 24
    sayan mukherjee
    September 7th, 2009 11:02 am

    Nice, very nice collection.

  25. 25
    Emil
    September 7th, 2009 11:27 am

    I like the examples.

    Since monitors keep getting wider, but not taller, we might start seeing the opposite trend in the future.

  26. 26
    Rick
    September 7th, 2009 11:38 am

    Good reading. Thx for sharing.

  27. 27
    Adam
    September 7th, 2009 11:50 am

    Good summary article. The most important part that you mentioned is to stick with conventions, as they help for usability. Keep it simple!

  28. 28
    Paul
    September 7th, 2009 3:17 pm

    Nice collection, but as some have mentioned, given recent menu convention development I too don’t think there is a ‘Surprise’ drop down menu. I just assume that unless there isn’t much in that section that it’s probably going to be a drop down menu, particularly if it’s a horizontal menu.

    *BUT* don’t be afraid to break the rules (conventions) if that means you achieve what you need in your designs. “Insanely Great” was never conceived by sticking to conventions.

  29. 29
    Matthew Niedzielski
    September 7th, 2009 4:09 pm

    Kinda cool to see the Washtenaw CC website on here, as that’s where I’m going for my web coding/design certificates!

  30. 30
    Erin
    September 7th, 2009 4:30 pm

    I appreciate that you actually wrote out the reasons & explanations for choosing your examples, instead of just placing images of the “trends.” I found this helpful.

  31. 31
    LOUSIENNE
    September 7th, 2009 5:42 pm

    Thanks very much for this! I’m in the middle of sorting out horizontal navigation for my site, so this has given me a few thing to consider :)

  32. 32
    Yan Hughes
    September 7th, 2009 6:26 pm

    while designing the horizontal primary navigation, I found horizontal submenu will help to reduce the distraction by using the vertical submenu.
    It will be nice if Smashing could provide some tutorials about how to make those kind of navigations in JQuery or some sort in trend techniques.

  33. 33
    Monty
    September 7th, 2009 7:46 pm

    Just great, very good article I really enjoy it

  34. 34
    SpeedContact
    September 7th, 2009 7:49 pm

    Thanks for such a wonderful article. realy v. helpful.

  35. 35
    Chris Guillebeau
    September 7th, 2009 8:14 pm

    Thanks so much for including The Art of Non-Conformity on your list! I’m grateful– and I should say that the true honor goes to Reese Spykerman, my superstar designer who has put hundreds of hours of work into making the site look great.

    It’s great to see the other examples as well. Keep up the good work!

  36. 36
    Suresh S
    September 7th, 2009 8:20 pm

    Even though we know this thing already, it’s nice to rewind our old backup to get some refresh. Good.

  37. 37
    Louis
    September 7th, 2009 9:20 pm

    Just to provide another reason why I think “surprise drop down menus” are bad:

    The user could hover over a menu, then choose one of those “sub sections”. They visit the page, and spend some time there. The next day, they come back to the same website, and they’re interested in looking at the same page they visited. Now, they cannot find a link to that page, because they’ve forgotten that there is a “drop down menu” under one of the main links. Now they have to go through the same steps they went through the first time they visited the site, thus “accidentally” rediscovering the drop down menu.

    I probably should have mentioned this above example in the article, but I felt it was a little too lenghy to explain, and I didn’t think it was necessary. Maybe I was wrong.

    Hope that helps.

  38. 38
    Retheesh
    September 7th, 2009 10:57 pm

    Good one…really worth…keep rocking SM….thnaks

  39. 39
    Kay
    September 8th, 2009 12:52 am

    This article was really superficial.
    Can’t fallow the argument about the so called “surprise-dropdowns”. Is an user really scared to death when dropdowns are showing up? BTW most clients have such a long wording/navigation structure for their projects that horizontal menues aren’t the way to go.

    I’m expecting better articles from smashingmagazine :P

  40. 40
    gagsy
    September 8th, 2009 12:55 am

    Good collection of webwepags.

  41. 41
    gagsy
    September 8th, 2009 12:56 am

    Good collection of web pages.

  42. 42
    chris rhee
    September 8th, 2009 4:36 am

    Thanks for including us (QN5 Music) in your list! Always a nice surprise to see a site I’ve worked on get mentioned on Smashing Mag. Now let me go make sure our server is in working order… ;)

  43. 43
    teyorfeliz
    September 8th, 2009 8:01 am

    Great example, I post some time ago 30 Beautiful Menu Examples in my blog!

  44. 44
    Dave
    September 8th, 2009 8:22 am

    What about the “Tabbed-Breadcrumb” horizontal navigation implementation? It’s unique, and cool, but I’ve yet to find a pre-built version for my own use and haven’t had a chance to code my own up yet.

    There’s a write-up about it here: http://www.teehanlax.com/blog/?p=211

  45. 45
    cypherbox
    September 8th, 2009 7:29 pm

    Nice collection. Thanks for sharing!

  46. 46
    giulia
    September 8th, 2009 11:25 pm

    nice!!!

  47. 47
    matz
    September 9th, 2009 1:18 am

    while i believe this is a good collection i think the art of navigation shows itself not on the homepage but on the second and third level. whereas a great navigational design works on the homepage, how do you adapt that once you get into the site itself? the more you offer and categorize, the more complicated this task becomes. as has been said in one comment in favor of horizontal navigation: screens tend to become wider, nor necessarily higher. However, when designing a complex, categorized navigation horizontally, you do not want to give up too much of that precious height. after all you still want some space to display your content/products.
    to sum up: i would like a follow up on how horizontal navigation is working once you get deeper into the site’s hirarchy.

  48. 48
    Josh
    September 9th, 2009 4:14 am

    Louis : “surprise” menus are bad because users revisting the site might forget about them? what?

  49. 49
    Brian
    September 10th, 2009 1:29 pm

    J Taylor Design’s navigation is nice but we updated a similar type of navigation because we got feedback that some users did not actually know the top level was clickable because there was no visual feedback outside of the cursor changing to a hand on those links. The secondary links underline when hovered over so we decided to offer the same visual feedback on the top level links.

  50. 50
    Imran
    September 12th, 2009 9:43 am

    This is very good collection to improve our own navigation system by following these great examples. Thanks for sharing :)

  51. 51
    Louis
    September 14th, 2009 3:44 am

    @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? :)

  52. 52
    Michel
    September 14th, 2009 7:03 am

    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.

  53. 53
    Shitic
    September 14th, 2009 8:42 am

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

  54. 54
    Louis
    September 14th, 2009 11:31 pm

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

  55. 55
    mimojito (aka Efrten)
    September 21st, 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.

  56. 56
    Liz
    September 29th, 2009 12:07 pm

    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.

  57. 57
    Liam
    October 7th, 2009 12:58 am

    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.

  58. 58
    Louis
    October 20th, 2009 4:14 am

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

  59. 59
    miecio pecio
    January 20th, 2010 10:11 am

    nice article thanks
    loading bars

  60. 60
    Iandavids
    February 3rd, 2010 3:30 am

    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.

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
Post your job