The traditional way for second-generation sites to provide site navigation is by having navigation or nav bars in the sites. These bars consist of links to appropriate pages within the sites. Some sites (including this site) group the links in horizontal rows or "bars". Other sites group the links in vertical bars. Still other sites place the links inside graphics, a combination known as image maps.

Size of Navigation Bars

Even though navigation bars are important parts of the site, they detract from the message of the site because they take up space on the monitor screen. This means that navigation bars should be kept as small as possible while still being able to perform their functions. Because of this, it is common for the text in the bars to be smaller than the text in the pages. In addition, the number of rows of links in a bar should be kept to three or less, if possible.

Icons As Links

Icons, as well as text, can be grouped into navigation bars. The icons should have alternate text descriptions of the links to provide text links to accompany the graphics links. One common practice is to place square brackets around the alternate text descriptions of icons that are links. For example, an icon acting as a link to a What's New page might have the following alternate text description in its XHTML element.

alt = "[What's New]"

Icons that are used as links should be placed in tables to keep them neatly aligned into bars. Even better is to use CSS.

Text-Only Navigation Bars

Because some people surf with graphics turned off, or use browsers with no graphics capability, it is customary to have text-only navigation bars in addition to graphical bars. As explained above, text-only bars can consist of alt tags that are part of icons that are used as links. Text-only bars can also be created as "stand alone" navigation bars (i.e. not associated with icons). These "stand alone" bars usually have either vertical lines or square brackets that separate the links, as shown in the following example. The bars are usually placed at the bottom of the pages, and a small font size is used.

Home | What's New | Site Map

Navigation Bars On Long Pages

Most pages are long enough that browsers place vertical scroll-bars on the pages. To make navigation easier by avoiding the need to scroll to the top of pages to access the navigation bars, it is traditional to have nav bars at both the tops and the bottoms of the pages.

Since vertical navigation bars can't easily be placed at both ends of the pages, some sites have Top links at the bottom of the pages to make it easier to return to the top of the pages. Other sites have horizontal text-only bars at the bottom of the pages to supplement the vertical bars that are near the top of the pages.

Navigation Bars are Hierarchical

Because second-generation web sites are hierarchical in structure, their navigation bars should also be hierarchical. That is, The content of the bars should vary with the hierarchical position of the bars. You might want, for example, your navigational bars to give links to pages that are in the same hierarchical level as the page being viewed. Or, you might want the bars to give links to pages that are in the next lower level. Regardless how you organize the content of your navigation bars, you should always have a link to your home page in each bar.

[ Site Map ] [ Distance Learning ][ Home ] [ Up ] [ Navigation Bars ] [ Metaphors ]