Popular Methods of Website Navigation

Categories Articles, Web Design

The design and navigation of a Website appeals to the users more as compared to other things, suppose you visited a famous Retail Showroom in your locality. You observe that the materials of store are not organized at all. You find it difficult to walk in the store as items are scattered even on the floor and the paths are blocked. Would you purchase anything from such a place? No, instead you’ll leave the store at once. The same incident can happen with your Website if its navigation is not defined properly. The Website Navigation should be self explanatory to every visitor so that he/she can understand the Website’s layout and get the desired information easily. In this write up, we’ll throw some light on the famous Website Navigation Methods being used these days.

Horizontal Navigation

This is one of the most common and widely adopted navigation systems. The text/icon links are placed horizontally and clearly separated from each other in one row. The user can click on any item to visit its Web page.

Horizontal Navigation Layout at Apple.com


In Horizontal Navigation, you’ve to limit the number of links to be added. However, you can use this navigation for drop-down menus discussed later in this article.


Vertical Navigation

In this form, the text/icon links are arranged vertically. They are either placed in left hand sidebar or in right sidebar. Placing the options in left sidebar is considered to be outdated these days. We suggest you to use Vertical Navigation as a secondary navigation method and use it on the right hand side.

An example of Vertical Navigation from open-comms.com


You’ve seen various blogs showing text links arranged vertically in the right/left side bar. This is another form of Vertical Navigation. The best part is that you don’t have to limit the number of links/objects in it. You can add n number of objects in Vertical Navigation with a scroll bar.


Drop-down Menus

Suppose you’ve arranged your Websites in order of categories and sub-categories. Now, how you will arrange the Website navigation in a self-explanatory. The best way is to use drop-down menus. You can arrange the drop-down menus either horizontally or vertically. However, this format should be familiar for the users.

Horizontal Drop-down Menu example from Puma’s Online Shopping UK Website


Vertical Navigation Drop-down Menu System from Porshe USA Website


Tabbed Navigation

Suppose you’ve to provide a wide variety of information but you’ve limited space. You don’t want the visitors to visit the different pages for a similar type of information what will you do. The similar problem arises with Internet Explorer 6 as its users have to track all the opened windows to gather information on a single type. That’s why they come up with Tabbed Browsing. You can use Tabbed Navigation in your Websites and build tabs to arrange similar information without creating different pages. We suggest you making use of Adobe SpryTabbedPanels Framework to create the tabbed navigation. You can either go for Horizontal Tabs or Vertical Tabs.

Horizontal Tabbed Navigation at http://365daysofastronomy.org/


Vertical Tabbed Panel at http://www.districtsolutions.co.uk

Almost each user is familiar with the Tabbed Navigation in software and browsers. So, the users get a feel at home while navigating through tabs. They know from where to start and where to go to get relevant information. If you’re not using pre-existing code to create the tabbed panels then it may take weeks to code them.


Breadcrumb Navigation

This is another famous secondary navigation system. It allows the visitors to keep track of their locations while visiting different, but related sections of the Website. The Breadcrumb Navigation can have both text/image links arranged horizontally or vertically in the order: Home > Section > Sub Section > Sub-Sub Section. Windows Vista and Windows 7 are using this navigation within the Address Bar in Windows Explorer. In addition, the advanced GPS applications are using this navigation.

Breadcrumb Navigation used in Windows 7


Guided Navigation

It is also known as Faceted Navigation. The filters of different options are provided on the Web page in this Navigation System. The visitors can use these filters/lists to get the desired & customized information. The Guided Navigation is mostly used at e-commerce or shopping Websites as it allows users to tailor their shopping experience and get the things, which they’re looking for. If the provided options are limited to customize the search the users can get confused. So make sure to provide all the options valid for your product while using Guided Navigation.

An example of Guided Navigation at Porshe.com


Tags Navigation

Tags are the META data referring the keywords used in a Web page. The tags are widely used in Blog and News articles. In fact, tags are used to inform the search engines about the keywords used on a page. However, the visitors can also use them. These tags are either created in Flash animated or static HTML clouds.

Animated Tag Cloud
Static Tags in a Widget at Sidebar as shown at sunblognuke.com/blog



Search Navigation

The navigation through search box is not new to us. You’ll notice a search box at each Website you visit. This box enables you either to search within the Website or at World Wide Web. You can enhance the Search Navigation at your Website by using the APIs of Google, Ask, Blekko, Twitter Search, and Bing.

An example of Search Navigation at Zappos.com


Footer Navigation

Footer Navigation is mostly used as a secondary navigation system on any Website. Basically it has the links or icons in the footer and this footer remains similar across the whole Website.

An example of Footer Navigation at seo-semantic-XHTML.com



As the name depicts, Sitemap provides a complete map of your Website. You can either arrange it using bullets in nested levels or through organizational charts. The visitors can use the sitemap to have a quick glimpse of your Website and know how many pages/sections you’ve on the Website.

Sitemap at linkbuildingworks.com



The Website Navigation System is an integral part of a Website. It not only helps to keep the visitors engaged but enables him to find the relevant information and importantly helps the search engine robots to crawl your Website efficiently.

John Michael, associated with Seo-Semantic-Xhtml, a specialized division of Ipraxa- a full service web agency, offering services like PSD to HTML, Ipad testing and Integration with third party applications like PSD to Wordpress, Joomla, Drupal, Magento and much more. You can connect with us at Twitter.