What is web site navigation?

What is web site navigation? cover image
  1. Home
  2. Web Design
  3. What is web site navigation?

To correctly describe web site navigation, we need to know the meaning of navigation. The word is derived from naus/nautes (Greek), which relate to sea and sailors. In addition to navigation, these roots have also given us other words like Nautical (relating to the sea), Astronaut (a sailor of the starsAster means a star), Cosmonaut (a sailor of the cosmos) etc.

Closing our brief English language discussion, “navigation” is the science and skill of moving from one place to another.

Sponsored Links

Web Site Navigation – Definition

Web site navigation is the science and skill which you apply to a web site that helps visitors move from one page to another.

Web Site Navigation Menu or Web Site Navigation Bar

Navigation on a web site is achieved by a collection of links (text/images/flash/java applets) that form the Web Site Navigation Menu or the Web Site Navigation Bar. This navigation menu or bar is usually placed vertically on the left or horizontally near the top of the web page – check the images below.

A vertical web site navigation system

Web page with a vertical navigation menu on the leftThe image on the left shows a very common layout of web sites. The header section (in orange) carries the logo, ideally on the left, and might have other images and/or text. The navigation menu is placed in the green section. It might not span the entire height of the page and can have other web page elements or simply blank space below it. The main web page contents (text and images) are situated in the light grey area.

Horizontal web site navigation bar

Web page with a horizontal navigation barThe web site navigation bar can also be placed horizontally right below the header section of a web page as depicted in green color in the adjacent image. The main contents of the web page are located in the light grey area. The only disadvantage of this web page layout is that the text spans the entire width of the page. This makes it difficult to read as studies have shown that online surfers find it hard to read web page text which spans more than 600 pixels. This problem can easily be overcome by limiting the width of the text display area so that it’s lesser than 600 pixels. To fill the blank space created on the left and the right of the text, one can use images or other design elements.

Vertical and Horizontal navigation systems

Web page with horizontal and vertical navigation systemsThe third common web site navigation menu layout is shown in the adjacent image. Here the navigation system exists both as a horizontal bar right below the header and also on the left. This is generally used for sites (such as this one), in which there are several pages (and hence, several links).
For example, on webdevelopersnotes.com, links to the important sections of the web site are placed horizontally and the links to pages inside that section are placed on the left. Links placed in the horizontal bar remain the same throughout the web site but the links on the left change depending on the web site section.

Horizontal and Vertical Web Site Navigation Menu/Bar – Which one to use?

A web site navigation bar/menu is a very important aspect of a web site. It actually decides the page design and layout. I follow a few basics principles in deciding whether to use a horizontal navigation bar or a vertical web site navigation menu system.

The above are simply my opinions and you might not concur… but I do advise that you look at the site contents (the actual contents of web pages) and the number of main links you want before you decide which web site navigation system to use.

Web Design