Make Navigation Bars That Work

If you've been reading these navigation guide tips since the beginning, you already know quite a bit about navigation bar design.

This page can stand on its own -- it's worth being thorough about such an important topic!

Graphical or Text?

Text navigation bars are little more than a group of links running down the side or along the bottom of a page. Graphical navigation bars present the links as imagemaps, icons, or graphics within an HTML table. The best argument for graphical navigation bars is that, in the hands of a competent graphic designer, they look quite good. However, graphical navigation bars take longer to load than text ones. You can improve that situation by reusing the same navigation bar throughout the site, so it gets cached and loads quickly after the first time.

Consider the inconvenience that graphical navigation bars can cause you if your site grows. It's a lot easier to add a text navigation option than to add a section to a graphical navigation bar. If you do your graphic design in-house, the changes will be time-consuming; if you employ outside graphic designers to create and maintain your navigation bars, changes will be expensive.

If you decide to implement a graphical navigation bar, don't entirely ignore the written word. Navigational elements consisting only of pictures are rarely effective, so don't just use a navigation bar full of pictures and expect people to understand. Also, use the ALT tag (or a small text navigation bar in addition to your attractive graphical one) so that users with their graphics turned off will be able to navigate.

Tips and Tricks

If you want a large, detailed navigation bar but you also want to save screen space, use JavaScript or ThingMaker to expand your navigation bar. When the user mouses over a navigation bar option, more options will be displayed. That way, you provide detail but don't make your users scroll through screenfuls of options.