How to Plan and Make a Website's Navigation Bar
The Web is interactive. As a visitor, you get to determine where
you go and what you see. One of the most important features of
every website is its navigation, and its navigation that gives
the controls to the visitor.
The navigation bar is a grouping of the main sections of your
site. It's important that every page has the same navigation
bar. Don't make the user think by having to relearn the system
when they get to a new page. Don't confuse the visitor.
Consistency builds trust and facilitates finding what's desired.
The navigation bar should be the same on every page including the
homepage. Since half your visitors will start on the homepage,
this is the perfect opportunity to introduce your site's
structure. The structure is represented in the navigation bar.
Use a visual structural diagram to help you create the navigation
bar. A visual structural diagram visually is simply something
that represents the planned organization or architecture of your
The main sections which were mapped out in the visual structural
diagram become your navigational sections.
There are numerous different types of navigation bars. They can
horizontal under each page's main banner image. The can be
vertical along the left or right hand sides. There can more than
one. For instance, you could have one navigation bar that points
to all the main sections of the site run vertical and along the
left hand side, and also have a horizontal one that runs across
the top and points to all the company-related pages.
How should you organize your navigation bar(s)? That depends. Ask
yourself, what will make the visitors' lives the easiest, not
make them think and help them best accomplish their goals? Also,
make sure it's clean and easy to use. If a navigation bar is
cluttered with 45 links all on top of each other with no breaks,
you're making visitors work hard to find what they want.
Finally, stick to Web conventions. Don't reinvent the wheel
here. You may have a designer who is dying to present your
navigation bar in some weird but original way. Don't let her.
You can't go wrong with a simple and small list of vertical
links or buttons down the left hand side of each page. Since this
is a standard, it's a sure bet. And the other good choice is a
horizontal nav bar across the top of your site just under the
Eye-tracking studies have been done to determine where people's
eyes move when they land on a Web page. They generally go from
the top left down to the middle of the page first. So be sure
that your most important page elements, including your
navigation, appear within this path. Now you know why so many
websites place their logo in the top left.
Even more importantly, always group your navigation in items of
six or less. So if you have eighteen buttons in your vertical
navigation bar, split them up into three visually distinct groups
of six. Eye-tracking studies have shown that this works best for
Web page viewers as well.
You may have a lot of pages that you want represented in the main
navigation bar. In this case, employ rollover menus. This is
It's important to keep in mind that your site's functionality
should work across all popular platforms and browsers. This
extends to navigation as well. So if you include rollover menus
in your navigation, be sure the rollover functionality works for
everyone, regardless of the platform or browser they're using.
suggest using it, but you still need to test it using various
platforms and browsers to be sure your navigation works for
When deciding on your navigation bar structure, be sure to think
in terms of how your visitors see and use the site. In other
words, group similar sections together from the point of view of
the user and what the user will want to do. Support sections
should be grouped together and company sections should be in a
By following a few simple rules when creating a navigation bar
you'll be sure you have the best-suited system on your site.
First determine what the most important sections are going to be
that require a link from every page. Then create a visual
structural diagram to visually show your site's various
sections. Think in terms of what you're visitors will want to
accomplish and use Web conventions such as putting the navigation
bar(s) vertically down the left or right hand columns and/or
horizontally across the top. Group your sections in clusters of
six. Be sure each button/link in your navigation bar is as
descriptive as possible so that your visitors know what to expect
if they click, and make the navigation the same on every page of
your site to establish consistency.
Jason OConnor is the head of Oak Web Works, LLC
(www.oakwebworks.com/), an Internet marketing
and Web design company in Massachusetts.
Jason is the author of "The Ultimate Guide to a
Successful Business Website" (bit.ly/6MPrey)
that teaches you how to hire a Web designer and
create a money-making website.