Skip to Navigation | Skip to Content

Web Template Guide: Navigation Bars

Help your visitors find information

Creating and implementing consistent Web site navigation is key to providing a good experience for your Web site visitors. You may have lots of great content on your Web pages, but unless people can find these pages, your content is worthless.

Find your default navigation bar

Each Web site contains one default navigation bar. It is saved in the "includes" folder in your department's Web folder. The file is called "navbar.htm".

This default navbar is the main navigation bar for your Web site and should be used on the following pages:

  • the home page for your Web site
  • pages in sections of your Web site that contain just one page. For example, the page for your "Scholarships" section, if that section contains no other pages.

Build your default navigation bar

If you are dealing with a new site in which a main navigation bar needs to be built, open your default “navbar.htm” file.

You should see the items "Home,” “About Us” and “Contact Us” in the list that opens. Add correct links to these items using the "Link" box in Properties. If you do not have pages to link to from your navigation bar yet, wait until you've created pages, open up your navigation bars and add links to the appropriate sections.

Add a new section to your navigation bar

Add a new section to your navigation bar by placing your cursor at the end of the line just above where you want your new section to appear. Press enter once. A new bullet should appear. Type the name of your new section. As you type the name of a new section:

  • Capitalize all significant words in this name.
  • Keep in mind that the section name should not be so long that it wraps beneath the first line.

If you add a new section or link to your main navigation bar, you must always open up all of your other navigation bars and make the same change in the appropriate places.

Add a bodyClass word to each section in your default navbar

In order for each section in your navigation bar to become bold when a visitor sees a page within that section, you must add a bodyClass word to the code of your navigation bar.

To do this, open your navigation bar file and set it so that you can see both your page and the page HTML code (click "Split" in the upper-lefthand side of Dreamweaver).

Find the line of code that corresponds to a section in your navbar. For example, the line of code that corresponds to your "Home" section may look like:

<li class="home"><a href="/academics/department/">Home</a></li>

After the snippet "<li class="", type a word that logically makes sense for the section. The following examples are typical bodyClass words for academic department Web sites:

  • Home: home
  • Academics: academics
  • Scholarships: scholarships
  • Experiential Learning: experiential
  • Careers: careers
  • Faculty: faculty
  • News: news
  • About Us: about
  • Contact Us: contact

All bodyClass words should be typed in lowercase letters.

Open the file "styles-local.css", which should be visible near the bottom of your Web site file list.

In the document that opens, find the paragraph near the top of the document that says "AUTO-SELECTING NAVIGATION". Enter a line for each main section that you create in your navigation bar that conforms to the following pattern:

body.home #navbar li.home,
body.about #navbar li.about,
body.contact #navbar li.contact

Insert the bodyClass word you created for each section in both places that "home" appears in the above example. Type these lines in the order that the sections in your navigation bar appear.

Create a secondary navigation bar

dropdown effect in navigation barsYou may want to include additional navigation items in some sections of your site. These items will appear in a "dropdown" in your navigation bar when a page within this section of your Web site is open.

For each section in which you need additional navigation, you will have to create new navigation bar.

This new navbar should have all of the items contained in your default navigation bar, plus the secondary items for only one section. Do not create a navigation bar in which more than one section has a "dropdown."

To assure that you copy all of the items from your main navigation bar into your new navbar, simply create a copy of your main navbar (copy and paste the "navbar.htm" file inside the "includes" folder). Rename (F2) the "Copy of navbar.htm" file something appropriate for the section it will serve, where the word after "navbar-" identifies the section.

"navbar-academics.htm" is a good name for a navbar serving the Academics section of your Web site.

Once you rename your new navigation bar, follow these steps:

  • Open your newly-named navigation bar file. Its contents will look exactly like the main navbar for your site.
  • Underneath the one section in the navbar you want to expand, press enter to create a new bulleted item. Use an additional bullet for each item in your secondary navigation. Add the appropriate link to each of these items.
  • Once you are done adding items to your section, highlight the secondary, or “drop-down” items. Click the “text indent” button in your Properties palette. The secondary items will then appear as secondary bullets.
  • Save your navbar file, and attach this navbar to each page in its corresponding Web site section.

If you add a new section or link to your main navigation bar, you must always open up all of your secondary navigation bars and make the same change in the appropriate places.

Create consistent navigation

The name you give to each section in your navbar needs to be implemented across your Web site in three places, the Title tag (top), the navigation bar (middle) and the Heading 1 content (bottom) on each assocated page:

Corresponding navbar label, title tag and heading tag

Click on image to see a larger version.

Learn more about how to change the Heading 1 content and the Title tag on your page »

Secondary

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ut nibh.

Organize your navbar

Wonder what pages or sections to include in your navigation bar?

Learn more about organizing your Web content »

See an example of well-organized Web content »