Guide to Website Navigation Design Patterns

Feb 8 2011 by Cameron Chapman | 40 Comments

Ultimate Guide to Website Navigation Design Patterns

In web design, there are certain common design patterns that are used for interaction. Site navigation has a wide variety of common and familiar design patterns that can be used as a foundation for building effective information architecture for a website.

This guide covers popular site navigation design patterns. For each site navigation design pattern, we will discuss its common characteristics, its drawbacks, and when best to use it.

Top Horizontal Bar Navigation

Top horizontal bar navigation is one of the two most popular kinds of site navigation menu design patterns out there. It’s used most frequently as the primary site navigation menu, and is most commonly located either directly above or directly below the site header of all web pages in a site.

Top Horizontal Bar Navigation

The top horizontal bar navigation design pattern is sometimes paired with drop-down menus whereby hovering on a navigation item reveals second-level child navigation items.

Common Characteristics of Top Horizontal Bar Navigation

  • Navigation items are text links, button-shaped, or tabbed-shaped
  • Horizontal navigation is often placed directly adjacent to the site’s logo
  • It is often located above the fold

Drawbacks of Top Horizontal Bar Navigation

The biggest drawback to top horizontal navigation is that it limits the number of links you can include without resorting to sub-navigation. For sites with only a few pages or categories, this isn’t a hindrance, but for sites with complex information architecture and many sections, this is not an ideal primary navigation menu option without the help of sub-navigation.

When to Use Top Horizontal Bar Navigation

Top horizontal bar navigation is perfect for sites that only need to display 5-12 navigation items in the main navigation. It is also the only option for primary navigation for single-column website layouts (aside from footer navigation, which is generally used as a secondary navigation system). When combined with dropdown sub-navigation, the top horizontal bar navigation design pattern can hold more links.

Vertical Bar/Sidebar Navigation

Vertical bar/sidebar navigation is when navigation items are arranged in a single column, one on top of another. It’s often found on the top-left column, preceding the main content area — according to a usability study on navigation patterns on left-to-right readers, vertical navigation bars on the left performs better than vertical navigation bars on the right.

The vertical bar/sidebar navigation design pattern is seen all over the place, on virtually every kind of website. Part of that is because vertical navigation is one of the most versatile patterns out there, able to accommodate a long list of links.

Vertical Bar/Sidebar Navigation

It can be used alongside sub-navigation menus, or on its own. It’s easily used for primary site navigation that contains a lot of links. Vertical bar/sidebar navigation can be integrated into almost any kind of multi-column design layout.

Common Characteristics of Vertical Bar/Sidebar Navigation

  • Text links for navigation items are very common (with and without icons)
  • Tabs are rarely used (except for the stacked tabs navigation pattern)
  • Vertical navigation menus usually have plenty of links

Drawbacks of Vertical Bar/Sidebar Navigation

Vertical menus, because of their ability to handle many links, can sometimes get overwhelming to users when they are too lengthy. Try to limit the number of links you include, and instead, use fly-out sub-navigation menus for sites with more content. Also, consider dividing the links into intuitive categories to help users find links of interest quicker.

When to Use Vertical Bar/Sidebar Navigation

Vertical navigation is suitable for almost any kind of site, but especially sites that have more than a handful of main navigation links.

Tabs Navigation

Tabs navigation can be styled virtually any way you want, from realistic, textured tabs that look straight out of a notebook to glossy, rounded tabs and simple, squared-edge tabs. They’re seen on virtually every kind of site, and can be incorporated into almost any visual style.

Tabs Navigation

Tabs have one distinct advantage over other types of navigation: they have a positive psychological effect on visitors. People associate tabs with navigation, because people are used to seeing tabs in notebooks or binders, and associate it with turning to a new section. This real-world metaphor makes tabs navigation intuitive.

Common Characteristics of Tabs Navigation

  • Generally resemble and function like real-world tabs (as seen in filing systems with folders, notebooks, binders, etc.)
  • Usually horizontally-oriented but occasionally vertical (stacked tabs)

Drawbacks of Tabs Navigation

The biggest drawback to tabs is that they’re more work to design than simple top horizontal bars; they generally require more markup, image assets, and CSS depending on the visual complexity of the tabs.

The other drawback to tabs is that they don’t work well for navigation with a lot of links, unless they’re arranged vertically (and even then, they can look awkward if there are too many).

When to Use Tabs Navigation

Tabs are appropriate for virtually any main navigation, though they are limited in the number of links they can display, especially when used horizontally. Using them for main navigation with a different style of sub-navigation for larger sites is a good option.

Breadcrumb Navigation

Breadcrumbs, which get their name from the Hansel and Gretel fairy tale of leaving breadcrumbs along the journey so they could find their way back home, show you where you are on a website. They are a form of secondary navigation, helping support the site’s primary navigation system.

Breadcrumb Navigation

Breadcrumbs are useful in sites with multiple levels of web page hierarchy. They help orient visitors as to where they are relative to the entire site. If a visitor wants to go back a level, they can just click on the appropriate breadcrumb navigation item.

Common Characteristics of Breadcrumb Navigation

  • Usually formatted as a horizontal list of text links, often with left-pointing arrows between them to denote hierarchy
  • Never used for primary navigation

Drawbacks of Breadcrumb Navigation

Breadcrumbs don’t work well on sites with shallow navigation. They can also be confusing when a site doesn’t have clearly compartmentalized and categorized content.

When to Use Breadcrumb Navigation

Breadcrumbs are best suited to sites that have clearly defined sections and multiple levels of content categorization. Without distinct sections, breadcrumbs can do more to confuse visitors than to help them.

Tags Navigation

Tags are commonly used on blogs and news sites. They’re often organized into a tag cloud, which may arrange the navigation items alphabetically (often with different-sized links to indicate how much content is filed under a particular tag), or in order of popularity.

Tags are excellent secondary navigation and are rarely seen as primary navigation. They can aid in findability and site exploration. Tag clouds usually appear on either a sidebar or footer.

If a tag cloud isn’t present, then tags are often included in the meta information at the top or bottom of a post; this format makes it easy for users to find similar content.

Common Characteristics of Tags Navigation

  • Tags are a common feature content-centered sites (blogs and news sites)
  • Only text links
  • Links are often of varying sizes when arranged in a tag cloud to denote popularity
  • Often included in a post’s meta information

Drawbacks of Tags Navigation

Tags are strongly associated with blogs and news sites (and, to a lesser extent, e-commerce sites), so if your site is of a different nature, it might not be useful to you. Tags also require a certain amount of work on the part of your content creators, as each post needs to be accurately tagged in order for the system to be effective.

When to Use Tags Navigation

Tagging content with keywords is good if you cover plenty of topics; if you only have a few pages (perhaps your website is a company site), then tagging content may not be needed. Whether you decide to also incorporate a tag cloud or just include tags in meta information will depend on your design.

Search Navigation

Site search has become a popular navigation method in recent years. It’s well-suited for sites with tons of content (like Wikipedia), which are difficult to navigate otherwise. Search is also seen commonly on blogs and news sites, as well as e-commerce sites.

Search is useful to visitors who know exactly what they’re looking for. But including a search option isn’t an excuse to ignore good information architecture. It’s still important to make sure that your content is findable for visitors who might not know exactly what they’re looking for or are browsing to discover potentially interesting content.

Common Characteristics of Search Navigation

  • Search bars are usually located in the header or near the top of a sidebar
  • Search bars are often repeated on auxiliary sections of a page layout, such as the footer

Drawbacks of Search Navigation

One of the biggest drawbacks to search is that not all search engines are created equal. Depending on what solution you have chosen, your site’s search feature may not produce accurate results or may be missing things such as post meta data. Search navigation, for a majority of the sites, should be a secondary form of navigation. Search is the fallback option the user will choose when they cannot navigate to what they’re looking for.

When to Use Search Navigation

For sites with tons of pages and complex information architecture, you certainly need to include a search feature. Without it, users are likely to get frustrated having to wade through links and multiple levels of navigation to get to the specific information they want.

E-commerce sites are another area where search is important, though it’s vital that search results on e-commerce sites are filterable and sortable depending on the size of the site’s inventory.

Fly-Out Menu and Drop-Down Menu Navigation

Fly-out menus (used with vertical bar/sidebar navigation) and drop-down menus (typically used on top horizontal bar navigation) are great for robust navigation systems. They keep the overall look of your site uncluttered, but also make deeper sections easily accessible.

Fly-Out Menu and Drop-Down Menu Navigation

They’re generally used in conjunction with horizontal, vertical navigation, or tabs as part of the site’s primary navigation system.

Common Characteristics Fly-Out Menu and Drop-Down Menu Navigation

  • Used for multi-level information architecture
  • Uses JavaScript and/or CSS for hiding and showing the menus
  • Links displayed in the menus are child items of the primary item
  • Menus are most often activated by mouse hover, but sometimes also mouse click

Drawbacks of Fly-Out Menu and Drop-Down Menu Navigation

Unless you put some indication (often an arrow icon) next to your main navigation links, visitors might not realize there’s a drop-down or fly-out menu with sub-navigation items. It’s important to make this obvious. Also, drop-downs and fly-outs can make navigation on mobile devices very difficult, so be sure your mobile stylesheets takes into account this situation.

When to Use Fly-Out Menu and Drop-Down Menu Navigation

If you want to visually hide a large or complex navigation hierarchy, drop-downs and fly-outs are a great option as they let the user decide what they want to see, and when they want to see them. They can be used to display a large number of links on demand without cluttering up the web page. They’re also excellent for displaying child pages and local navigation without requiring visitors to click through to a new page first.

Faceted/Guided Navigation

Faceted/guided navigation (also called faceted search or guided search) is most commonly seen on e-commerce sites. Basically, guided navigation presents you with additional filters of content attributes. Say you’re browsing for a new LCD monitor, the guided navigation options might list things like size, price, brand, and so on. Based on these content attributes, you are able to navigate to items that match your criteria.

Guided navigation is invaluable on large e-commerce sites with a huge and varied inventory. Straight search options often make it difficult for a user to find what they want, and increase the likelihood that they might miss a product. For example, they might search for a product in "taupe" when you’ve got it marked as "tan" or "beige", even though it’s exactly what they were looking for.

Common Characteristics of Faceted/Guided Navigation

  • Mostly seen on e-commerce sites
  • Usually let users filter multiple times for different characteristics
  • Almost always uses text links, broken down by category or in drop-down menus
  • Often paired with breadcrumb navigation

Drawbacks of Faceted/Guided Navigation

Guided navigation can be confusing for some users. In addition, there’s no guarantee that the user will be looking for one of your pre-defined categories.

When to Use Faceted/Guided Navigation

Faceted navigation is very useful on large e-commerce sites. It makes it easier for users to tailor their shopping experience, and to find exactly what they’re looking for. It can also be useful on other directory-style sites.

Footer Navigation

Footer navigation is mostly used as secondary navigation, and may contain links that don’t fit within the main navigation, or include a simplified site map of links.

Visitors who can’t find what they’re looking for in the primary navigation menu often look at footer navigation afterwards.

Common Characteristics of Footer Navigation

  • Footer navigation is often used as a catch-all for navigation items that don’t fit elsewhere
  • Usually uses text links, occasionally with icons
  • Often used for links to pages that aren’t mission-critical

Drawbacks of Footer Navigation

If your pages are long, no one’s going to want to scroll to the bottom to get to your footer just to navigate your site. With longer pages, footer navigation is best left to repeating links and serving as a condensed site map. It should not be relied upon as a primary form of navigation.

When to Use Footer Navigation

Most sites have some kind of footer navigation, even if it’s just repeating navigation that’s elsewhere. Consider what would be useful to have there, and what your visitors will most likely be looking for.

Conclusion

Most websites use more than one navigation design pattern. For example, a website might have a horizontal top bar as a primary navigation system, with a vertical bar/sidebar navigation system to support it, along with footer navigation for redundancy, convenience, and auxiliary pages.

When selecting which navigation design patterns to base your navigation system on, you must choose ones that support the information structure and nature of your website. Navigation is an important part of a website’s design, and having a solid foundational design is imperative to its effectiveness.

Related Content

About the Author

Cameron Chapman is a professional web and graphic designer with over 6 years of experience in the industry. She’s also written for numerous blogs such as Smashing Magazine and Mashable. You can find her personal web presence at Cameron Chapman On Writing. If you’d like to connect with her, check her out on Twitter.

40 Comments

Brian Krogsgard

February 8th, 2011

Great writeup on the basics of different navigation types, Cameron. This is a nice resource for thinking through an initial site design, and a good place to send clients so they can have an understanding of their own needs.

I often don’t think about Search as a navigation tool, but it certainly is. Nice work.

Hassen

February 8th, 2011

Very nice tut. Very clear as usual ! Thanks.

Anelia

February 8th, 2011

Amazing article!!! Well structured and explained!

KEEP UP!

Ahmed Bolica

February 8th, 2011

Cameron i like your topic thanks dear

Young

February 8th, 2011

I personally thought the Tab Nav should be considered a type of top horizontal, not a category on its own, but it did help you address the point about it requiring more work – though I think, if you’re doing any kind of active state highlights, any navigation is just as much work. This of course is unless you’re doing something like jQuery AJAX tabs. Even then I don’t think it’s that much more work.

But overall, a good summary!

Peter

February 8th, 2011

Nice to see that you included the search, recently had a conversation or rather disagreement with a fellow designer about it being considered a way of navigating.

Great read!

Lou U

February 8th, 2011

Cameron,

Well done! Very informative, clear, well laid out. Thanks for addressing this fundamental and important design topic.

Michael Tuck

February 8th, 2011

Nicely done. I can use this for my students when they begin learning about the different types of navigational presentation.

Felipe Genuino

February 8th, 2011

Meus parabéns pelo artigo, muito bem explicado, informações preciosas.
Thanks.

Jason

February 8th, 2011

Thanks for the breakdown! Love these types of posts… def some of those I haven’t done yet…

Miko Catabay

February 8th, 2011

Very informative article. Thanks for sharing. My favorite is the fly out menu.

Red

February 9th, 2011

Very comprehensive article and definitely an interesting read. Thanks for sharing!

white lions

February 9th, 2011

Great article. I will use this on my upcoming project

Zachary Kraft

February 9th, 2011

This pretty much sums up what needs to be seen around some parts of the web today, and even I could benefit from some of it http://www.creativeautomaton.com.

Thomas

February 9th, 2011

Cameron, excellent article, very detailed. Personal fav is the dropdown flyout menu.

Barry

February 9th, 2011

Excellent round up of informative tips. I’m still learning and this was a timely article for me. Thanks

marianney

February 9th, 2011

great comparisons. i’m bookmarking this in delicious right now :)

Nico

February 10th, 2011

Good article, but sometimes it seemed you made up some drawbacks just to have some.
Most of your drawbacks are structural issues and can be solved during the conceptional process.

You shouldn’t have more than 8-10 main navigation items for usability issues, whether it’s a horizontal, vertical or any other kind of main navigation.
Why is it a drawback to use sub-navigations?
The drawbacks for breadcrumb navigations don’t make sense to me either: If the breadcrumbs confused the user, it would be a strutural issue of the website’s sitemap and in the conceptual planing, not in the breadcrumb menu itself.

The main drawbacks to use a vertical main navigation is, that it’s not at the eye-level of the user to get an overview of the content of the site and somtetimes you even have to scroll down to see all of it.
Vertical Navigations are great for sub-navigations, categorized navigations and sitemaps (e.g. in the footer).

Kay Guenther

February 10th, 2011

Great article. Very concise and easy to understand.

Rafael

February 12th, 2011

Good article, thanks!

Umer

February 13th, 2011

Easy Navigation of a website improves the chances of high conversion rate

Paul Hempsall

February 15th, 2011

Thanks for the great article Cameron.

I think it’s worth noting for those navigation types that are frequently developed with the aid of javascript, that people need to be mindful of progressive enhancement and accessibility.

This would generally apply to drop-down, pull-out and guide navigation.

You still need to provide mechanisms for people to access sub-items if script is not supported on the device and assistive technology.

It’s also important to consider the hit area on pull-out/down menus and the active area that keeps the submenu displayed. Those with mobility impairments can have a frustrating experience if the submenu keeps disappearing on them if they can’t keep the pointer over the “active” area.

Irith

February 15th, 2011

Thanks so much Cameron. I need to re-read this more closely. One question though. As someone who’s new to Information Architecture could you apply this same analysis to widgets? I’m faced with the availability of all different sized widgets for all different navigational purposes and I wonder about their role in relation to the ‘traditional’ navigational items. Thanks.

Isiah

March 1st, 2011

If:

“according to a usability study on navigation patterns on left-to-right readers, vertical navigation bars on the left performs better than vertical navigation bars on the right.”

then why do so many blog site formats have a right panel navigation – including Sixerevisions ??

Jacob Gube

March 2nd, 2011

@Isiah: My idea behind this layout is that the article content is #1. And in most blogs, that is true. You can see that in the short header, the compact horizontal navigation bar, and the sidebar positioned on the right. So, if readers do read from left-to-right and top to bottom, I would like the article’s content enter your eyeflow as soon as possible. I did some click heat-mapping on the front page, and this current layout indicates that this current design achieves the goal.

Compare that with Amazon.com, where items are categorized into many things and people go to the site knowing exactly what they want to buy, and you can see why they choose to put their nav on the left.

Here, you go to the front page to get what you want – the newest story.

Isiah

March 2nd, 2011

@ Jacob: yes it’s an interesting conundrum. For years web sites were happily left hand navigation — and then blogs happened. The fashion now seems to have swung to the right.

From Jakob Nielsen’s Alertbox, November 14, 1999:
http://www.useit.com/alertbox/991114.html

“If we were starting from scratch, we might improve the usability of a site by 1% or so by having a navigation rail on the right rather than on the left. But deviating from the standard would almost certainly impose a much bigger cost in terms of confusion and reduced ability to navigate smoothly.”

Looks like the web has indeed started again and realised that larger (wider) screens mean that nav on the right is no longer a risk it once was.

My own site has a left hand nav, I know it’s kinda old-fashioned – I appreciate that at some point a change might be in order :)

aurel

March 8th, 2011

very informative – also I think it would help to have this article besides us when we first try to design the sites and organize the content,

Sometimes (at least with me) these articles help to remind us what is available, and therefore easier to make the perfect judgement on which navigation type is most fit for the design in hand

a fantastic article, hope you will go through all kind of design patterns

thanks

Alessandro Pucci

March 15th, 2011

Good Article. Take everything to say about navigation.

Helen

March 30th, 2011

I’m an IA and I couldn’t have said it better myself. I’ll be referring this article to my clients and stakeholders. Thanks.

nana

May 19th, 2011

What are your thoughts on Main top navigation which have sub-menus. I feel a user sees a top navigation and goes to click it rather than hover on it, so top navigation should limit use of sub-navigation. I may be wrong but I would like to hear thoughts

JOnathan

May 27th, 2011

Great posting! I didn’t know what the name for breadcrum navigation is but now I know what to look for!

Thanks!

jebbiii

June 1st, 2011

One more type – table of contents style, often seen for tech support and often combined with the search style.

nice article. I found this article while thinking about seo and navigation styles.

Suresh

June 30th, 2011

Very Useful and informative!!! I feel both Top horizontal navigation and Tap navigation has the same impact on the website. The only difference is Cosmetic look(Top Horizontal Nav looks simple and Tab Nav looks fancy. Am i Right? if i’m wrong, pls correct me.
Thanks.

Rita

August 20th, 2011

Intresting article, I’m going to use some of your classification as a reference in my Master Thesis. One question is, that I’m wondering how about a realy popular kind of presenting categories in online stores, such as the one in this shop: http://sherpa.pl/ (polish). I mean 12 segments above the footer navigation. It’s common to group categories in that way with a photo attached. What is the name for this? Thanks!

kd

September 1st, 2011

Thanks for the article!!! Its straight forward than I could find on a book

Anish

September 11th, 2011

Good info! Thanks :)

PixelR3AP3R

September 12th, 2011

Great article.

This actually supports a conversation I was having on Friday about footer navigations.

sat

October 21st, 2011

Good basic info. Thanks for the post.

fofa

November 7th, 2011

Really needed this article tonight! Easy to follow and logical, thank you!

Gelie

November 10th, 2011

This is easy if you use a WordPress and Thesis theme.

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences.

Mobify