Types of Navigation Systems

Embedded Navigation Systems

  • Help users to understand where they are and where can they go
  • Provide context and flexibility
  • Consists of three types
  • Intended to be in every page
  • Allows access to site hierarchy from every page

Types of Embedded Navigation Systems:


1. Global navigation

A global navigation system is an essential part of every page in a website. It often shows up in the form of a bar at the top of each page. A global navigation system can directly take a user to main areas of a site, as well as the home page. It can also provide a link to the search function, which is a type of another minor navigation system.

2. Local Navigation System (LNS)

Local navigation system complements the global navigation system. Several local navigation systems can be present on the website. They usually provide more detailed navigation within a subcategory.

Example: multiple LNS with very little in common, also called sub-sites.

3. Contextual Navigation

  • Navigation links specific to a particular page, document, or object.
  • Supports associative learning
  • Allows you to create connectivity links that supports users and navigations

Example: links embedded in contents

Implementing Embedded Navigation


Balance between flexibility of the navigation and the danger of overwhelming the user with too many options.
Global, local, and contextual elements usually exist together on most pages.

Example: all three types of navigation combined may overwhelm user like on this website

How to implement navigation bars.

  1. Text or graphics
  2. Drop-downs
  3. Cascading menus
Retrieved from:

4. Pop-ups (text opens in a new window or tab)

Supplemental Navigation Systems (SNS)

2.png 3.png 4.png
  • Provide different ways of accessing information
  • External to the basic hierarchy of the site
  • Similar to the table of contents in books
  • Usually present a few levels of information hierarchy
  • Provides broad contents access

Implementing Supplemental Navigation Systems

  • Reinforce hierarchy
  • Facilitate fast and direct access to the contents
  • Avoid overwhelming user with too much information

Sitemap is a list of pages of a website available for users.

Example: Intel’s sitemap

Site Indexes

  • Similar to indexes on the back of a book
  • Link within the index leads directly to designated area
  • Contents are alphabetical order


Search is a part of SNS. Useful, but can’t be used as a primary source for navigation.

Primary Use of SNS Guide Layouts: Tutorials, guided tours, micro portals focused around specific audience, topic or task, keeped short and to the point, meant to answer questions.

Navigational Approaches

A-Z Indexes

A-Z indexes are used for large amounts of information, such as what one might find on a music site. Because the index is alphabetized, the user can more easily find an artist or album by narrowing the field to a particular letter.

Image from

Breadcrumb Trail

A breadcrumb trail consists of a row of ordered links starting from Home. Each link that follows Home represents the page or layer that the user selects when navigating down to the current page. The links basically provide a horizontal visual representation of the hierarchy and allow the user to go back to any page in the chain.

A breadcrumb trail would look something like this:
Home > Section 2 > Topic 5 > Special Information

Browser Mechanisms

Browser mechanisms are different navigation buttons that vary from browser to browser.

Examples include the back and forward buttons, session history button, browser history button, and a list of URLs.


Directories are a page composed of links that are organized by topic, similar to the sitemap.

Examples include sites such as and


(image from )

Drop-down Menus

A drop-down menu is similar to a dynamic menu; when a user hovers the mouse over a menu item, a corresponding sub-menu will “drop down” below the highlighted subject.

Dynamic Menus

Dynamic menus appear when a user moves the cursor over a menu item, signaling a new related sub-menu.

Navigation Bars & Tabs

These are common navigation devices which allow the user to go to main sections or pages of a website.

(image from

Paging Navigation

Paging Navigation views Webpages as a series or sequence.

(image from

Site Maps

Site maps are typically an outline of the Webpage, where headings indicate main sections or pages, and underneath the heading is a list composed of links to all of the contents in that section.

(image from

Step Navigation

Step navigations takes users to the next page in a series in sequential order.
One example of this is the average tutorial (which usually has a Next button or a link).

Tag Clouds

Tag Clouds are a fancier navigation that is composed of an arrangement of links to content. The arrangement may or may not be random. The size of the hyperlinked word is relative to the number of times the link has been clicked.

(Image from

Tree Navigation

Tree navigation is a list of links that can each be clicked to reveal sub-lists of links under that particular topic, and there can also be sub-links within the sub-links. In this system of links, the hierarchy of topics is more easily displayed. Many times, a [+] or and arrow (>) is used to indicate the presence of more information contained under a topic.

Vertical Menus

Vertical menus are a list of buttons or links which are usually found on the left side of a Webpage.

Visualizing Navigation

Consists of techniques for representing content as a mind map or as a diagram. It shows concepts as they relate to the whole site and also other sections.

Examples of visualizing navigation include Star Trees, Visual Clusters, Visual Thesauri, and Concept Maps or diagrams.

Works Cited

Affilorama. (n.d.) How Do I Navigate Around The Web?. Retrieved from

Designing Interfaces. (n.d.) Global navigation. Retrieved from

Gravitate Online. (n.d.) Design glossary. Retrieved from

Kelbach, J. (2007). Designing Web navigation. Sebastopol, CA: O'Reilly. pp 54-82

M.H.M & Associates. (2011). Basic Internet Navigation. Retrieved from