Different types of web site navigation

Different types of web site navigation cover image
  1. Home
  2. Web Design
  3. Different types of web site navigation

Web site navigation system is a collection of links that might be text, images, flash files or Java applets. A web site navigation bar can be of the following types:

Text links in a web site navigation bar

The navigation bar can consist solely of text links. If the links are placed horizontally, they form the web site navigation bar [as I call it]. The links can also be placed vertically one after the other on the left side of a web page. The top horizontal row and the left side are two common places where you find the web site navigation system.

Sponsored Links

Navigation menu and images

You would have come across web sites in which the navigation menu consists of a series of images which are linked to different pages. Web designers usually add little JavaScript code to such image based navigation menu systems so that images change on mouse-over. This acts as a sort of visual guide – to let the visitors know which page they would go to if they clicked on the image. To learn JavaScript, you can go through the JavaScript tutorial. To know how to change images on mouse-over, you can read JavaScript image rollovers.
Image based navigation systems can also consist of image maps, in which one large image is employed. Different sections of this image link to different web pages. To know about image maps, go to the Advanced HTML TutorialClient side Image maps.

JavaScript Drop down dynamic menu systems

Dynamic drop down menu systems developed in JavaScript are very common nowadays. The reason for their popularity is the relative ease of creation and maintenance. Also cross-browser visually appealing drop downs can now be created with the help of programs.
Creating dynamic JavaScript based drop down menus for web sites.

Flash based web site navigation menu

A web site navigation system can also be developed wholly or partly in Flash. There are three advantages of creating a Flash based navigation bar. Firstly, you can take use cool animation features of flash and provide your visitors a richer web experience. Thus, instead of simple image changes on mouse-over, the links on your Flash menu system can gradually fade-in and out or can play sounds on mouse-over. Secondly, it is easy to maintain the web site because you don’t need to change each web page if the navigation system has to be modified. The Flash navigation system is a single flash file. Replacing this file will change the navigation menu on all pages! Thirdly, with a little ActionScript you can create beautiful dynamic drop down navigation menus.
Two disadvantages that I can think of are the requirements of the Flash plugin to view the flash file and secondly, search engine indexing. Google has started indexing Flash files but does it follow links included in Flash remains a question.

Navigation using Java

Just like images and Flash, web site navigation systems can also be developed in Java applets but this is not very popular and it’s like using a Formula 1 car to drive to the local 7-11.

Web site Navigation System – Where should it occur on a web page?

Are the left hand side and the top horizontal row the only places to have a navigation menu? NO!
However, it has become a sort of standard on the web to place the navigation links at these locations. If your site caters to a very general audience, I would advise that you do not deviate from these standard web design practices.

I have come across web sites where the navigation bar has been placed right at the top even above the header with the logo and everything. This is fine as long as the navigation is also provided at the bottom of a page. Imagine scrolling down on a long page and then scrolling back to the top once you have finished reading the page! Quite painful, isn’t it? Since vertical scrolling on a web page depends on several factors (such as the screen resolution of the client’s monitor, the browser configuration, installed browser toolbars, the web page contents etc.), placing the navigation system on the left is a sort of compromise between placing the navigation links at the top and bottom because it is situated somewhat in middle (vertically) of the page. Hence, unless your web page is very long, visitors would be able to see a little of the navigation system on the left even if they scroll one page down. This might be one of the reasons why the left side navigation system is very common on web sites.

Finally, in the older days of the web, I had come across web sites in which the navigation system lay on the right. In fact, I had even designed a site for a client in which the main links were placed vertically from the top-right corner of the page. The reason for doing this was one and only one – the client wanted it! But that was a long time ago. Now even if clients ask us, we would try our best to dissuade them. It is kind of surprising that even though most of us turn a page of a book from the right side, the left hand-side navigation on a web page has become more popular.

Since the right-hand side navigation system is contrary to the more common and popular left-side menu system, it would not be wise to use in on a web site because it might confuse visitors. In addition to the disadvantage the right-hand side navigation system offers to human visitors, it might prove problematic for search engine bots. If you lay your web page in tables, you will understand that the right cell which will carry the web site navigation menu will be read by a search engine bot at the end, hence, the search engine bots might not be able to follow links properly. [Just seems logical – I have no data to support this claim so don’t hold me responsible if this is not true].

Web Design