Navbars are Nifty (and Necessary)

A "navbar" is an essential element of a well-laid-out site. A navbar not only makes navigation easier, but is an integral part of a site's branding. When a user sees the navbar, they know what site they're on, and they know that they can get back to where they started any time, so they worry less about getting lost. Your navbar should include all the main sections of your site, and it should be the same on every page of the site (although each section of a larger site may have its own sectional navbar in addition to the main navbar). Every page should have a navbar as an integral part of the layout of the page, which should be consistent throughout the site. Most designers put a navbar at both top and bottom of the page, although they needn't be exactly the same. A "sidebar" is also a good place for a navbar.

A navbar may be made up of individual graphics, it may be an image map, or it may be simple text. Javascript may be used to make the buttons change appearance when the mouse is over them, or to create even more elaborate effects, such as a bit of explanatory text that appears for each item. Make sure that your script includes a bit of code at the beginning to hide the script code from older browsers that don't support Javascript. The Golden Rule of Web design applies to navbars, too: Keep it simple! Never use clever Javascript animations just because you can, but only if they actually add functionality to the user interface.

In the early days of the Web, every item on a navbar tended to have a cute little icon next to it. Nowadays, improper use of cutesy icons falls into the same category as hit counters and busy backgrounds - an all-too-common sign of amateurish design. The original purpose of the little icons that grace our airports, road signs and Web sites was to make it easier for people who don't speak the local language (or can't read) to find what they're looking for. This is quite apropos on the international Web. It logically follows, of course, that an icon that doesn't clearly represent what it is supposed to represent is worse than useless. A little picture of a letter is obviously the place to click if you want to send email to a site's proprietors, but a little picture of a man or a circle or triangle is generally meaningless. If your icons aren't worth a thousand words apiece, ditch them. Also, if you're going to use icons, make sure they fit in with the overall look of the site.

Many sites use a little hierarchical outline at the top of each page, to good effect. Across the top of every page is a list of all the levels between the home page and the current page, all of which are hyperlinks (see Yahoo for the best-known example). For example, the Widgets, Inc. Web site might have the following on the top of the page that describes their latest product:

Widgets, Inc. : Products : Consumer Widgets : New Widget 6.0 for Windows

Each of these items is clickable. The user can see at a glance exactly where he or she is in the site, and can go back to the "Consumer Widgets" hub page, the main "Products" hub page, or the site's home page at any time. This setup does not replace navbars, but exists in addition to them. Every page should still have a standard navbar, perhaps on a sidebar and also at the bottom.

Pyramid Scheme
Nav 101
I've Been Framed!