Web Design & Dev

Website Navigation: The Complete Guide

MotoCMS Editorial 27 November, 2014

Can you imagine a website without navigation? This section is one of the most vital for any site and sometimes adds to its information architecture greatly. It’s impossible to describe website navigation with only a few elements.

Website Navigation - main

A well-known navigation menu is just a tip of the iceberg. It isn’t the only element that provides a navigation within the website. You might be surprised to learn how many navigation elements a website contains. Let’s check the most prominent of them and learn where, when and how they can be used to provide the perfect user experience.

The most popular navigation elements are:

  • Navigation bars and menus;
  • Breadcrumb navigation;
  • Search bars;
  • Site maps;
  • Text links etc.

Main Website Navigation Types

Navigation Bars

Navigation bars and menus are the most traditional means of guiding a visitor through the website. Most menus use hierarchical principle for the structure: from general sections to more specific. It’s the easiest and the most natural way to provide navigation across the website to any category and page.

Navigation bar is a panel placed on the page top and it usually contains the main categories of the website. Sometimes it may appear on the right or left side of the page or even on the bottom. Some creative examples of the navigation bar may include navigation in center of the page.

Exhibitions Guggenheim

Website Navigation - Exhibitions Guggenheim

With the responsive web design extensive use navigation bar is often made hidden to save some space of the website. In most cases it appears when you click or tap on a “Hamburger Icon” in the corner.

There are many pros and cons on the Hamburger Icon use for the menu labeling. Most haters claim it is bad for the UX because it hides important stuff under the icon and makes a user perform a bit more actions to reach the content they want to. However, we can notice a hamburger icon used on many websites and for now there’s no better solution to replace that icon.

In-page navigation for one-page websites is mostly similar to that of the sliders. It depends on the type of scroll – horizontal or vertical. This type of navigation is often presented in a form of a fixed transparent panel with a row of points. You may scroll down to discover all content of the website or you may use these navigation points to jump right to the next section.

Brandon Johnson

Brandon Johnson Website Navigation

Navigation Menus

Today you can come across multiple versions of navigation menu styles. Drop-down menus rank first in this category as the most popular and often used style. It appears when the element in a menu bar is clicked and another menu drops down. Drop-down menu may contain many levels to lead a user to the most specific areas of the website.

Norwich University of Arts

Norwich University of Arts Website Navigation

There’s a common misconception that multi-leveled drop-down menus worsen user experience and the “Magic 7±2” rule shows the optimal number of levels. However, one of the latest surveys displayed that mega menus with large 2-dimensional drop-down panel works well for most users. Such mega menus are perfect for big websites with complex navigation system where regular drop-downs are not too handy and miss most of options users may need.


Everlane Website Navigation

There is another problem with drop-down menus: they usually appear when hovered and stay visible while the pointer stays on the menu field. When the pointer is moved from the panel the drop-down menu hides away and the user should start over again. It’s especially obvious with the so-called “diagonal problem” when the pointer temporarily goes outside the menu area to reach the content on the other side of the panel. This issue may be solved with the drop-down menu stay visible for some time even if the pointer is moving outside the menu panel.

Breadcrumb Navigation

This navigation type works in reverse to the navigation menus. It allows a user to track a path back from any place on the website The term comes from the Brothers Grimm’s fairy tale “Hansel and Gretel” where children were leaving a trail of breadcrumbs to find their way back home.

The Guardian

The Guardian Website Navigation

Breadcrumbs navigation usually appears on the top of a page and shows the hierarchical position of this page in the website structure. Parental categories for the page may be highlighted in bold or shown in different colors or fonts. They are usually separated with a “more-than” sign or other glyphs and allow a user to jump right to the section he finds interesting.

Breadcrumbs may be a Path- or Attribute-based links that provide a different navigation. Path-based navigation works as it was said above and may appear on any website, while Attribute-based breadcrumbs appear mostly on eCommerce websites. This type of navigation doesn’t display hierarchy but shows characteristics of the item on a page that can be reached through many ways.


Groupon Website Navigation

Footer Navigation

Footers are often neglected or paid little attention in terms of design and structure. This mostly happens due to the popular web design principle that claims what is below the fold is less important. However, Footer is often the best place to display important info about the company, its address and phone number.

Footer is a common place for social buttons and so guides visitors to social media pages of the company. Sometimes we can find some surprising categories in websites’ footer sections, like on the Chickenbot page: it contains an Ingredients section in the Footer between the “Privacy” and “Credits” tabs.


Chickenbot Website Navigation

Footer is a perfect place for other additional data of the website like Recent or Popular Posts, Comments and Testimonials sections or some useful stuff like banners, call-to-actions or various offers.

Separate Pages

Separate pages navigation is a bit alike to mega menus but it can’t be depicted as a mega menu due to the amount of the content . Making a visitor to use a separate page for navigation is maybe not the best solution in terms of UX. But when the choice is between creating a huge clumsy menu or using a separate page to show the content, then separate page menu may be not the worst option.

Additional Navigation Items

Search Bars

One of the most underrated navigation types – search bar – offers a great way of browsing website without wasting time. Actually, search bar is not the main navigation means because it cannot guarantee that a user will find what he looks for. It only gives hope that this or that website may possibly have this kind of info.


MySpace Website Navigation

However, search bar is still one of the most important elements of the website design. It helps a user to find necessary content directly, without having to use a navigation menu. Search bar should be definitely included into 404 page design. It improves UX and stimulates a visitor to provide navigation from the error page without having to leave the website unsatisfied.

Site Maps

Unlike search bar, site maps are losing their popularity and functional meaning. Firstly because users are offered enough navigation means used to find what they need.

Virgin America

Virgin America Website Navigation

Another reason is that site maps usually contain plain text what makes them not too appealing and handy to use for visual-craving users. Despite the fact that adding icons or other visuals to the site map is not a problem, it won’t make them any more useful or attractive. Users are to miss some info anyway due to the trend of scanning website pages instead of carefully reading them.

Today site maps are mostly created for search engines that crawl a sitemap.xml file, while their functionality for user diminishes.

Text Links and Anchors

Often considered as a separate element in website building and more used for SEO options, links are a perfect way to guide visitors through your content. Thus, links should be considered not just a part of link building process but a way of showing visitors more on your website, helping them find more useful info on the topic.

Tags and A – Z Lists

These additional means of navigation do suit any website. Actually, tags are still widely used but in terms of functionality they are not highly popular among website visitors.

In general, tags are some kind of keywords or sub-categories that narrow existing categories of the website and allow users to find more specific content. Visitors may use tags when the website doesn’t offer a “Related Articles” section or when this section’s content doesn’t satisfy a visitor.

Another pitfall is that tagging the article is mostly an intuitive process and there’s always a risk to overuse tags and create a cloud of thousands meaningless tags. Thus, categorizing tags and organizing a tag cloud is essential for any website owner.

A – Z lists are, on one hand, easy to use because they remind of a library catalog that is familiar to anyone. On the other hand, they are usually too large and complex to help finding info easily and quickly. Those lists are appropriate for big portals like recipes websites where mega menu may be not enough.

Agent Pekka

Agent Pekka Website Navigation

A Few Thoughts About Navigation Use

When it comes to the choice of navigation types for the website the main thing is: the simpler – the better. Your navigation should be easy to use and understand, not misleading, visually attractive and harmonious.

  • The style of navigation menu should present your website content in the best possible way. Remember: if categories don’t fit in one row, consider a drop down menu.
  • Drop-down menu will be great for a small website with a small amount of categories. Vertical menu doesn’t worsen UX and adds to the design.
  • Mega menu is good for websites with wide structure and multiple categories that may be displayed with images. Add A – Z list for a better search in case your users know exactly which items they need.
  • If you need to add images and descriptions to the categories – choose a separate page menu.
  • Don’t neglect a search bar. Add it to the header or footer and leave it visible on the 404 page to offer a user a handy navigation from the Error page.
  • Tags, lists and search bars are only additional means of navigation. Don’t rely only on these styles.

You may freely combine various styles of navigation, but the bottom line is making it comfortable for users.

2 responses to “Website Navigation: The Complete Guide”

  1. great article many thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Author: MotoCMS Editorial
Here are the official MotoCMS news, releases and articles. Find out the latest info about product, sales and updates.