• Creating a top of page navbar

Navigational bars

This technique gives a possible implementation for the CategoryBpNavbar by providing a mechanism by which the user can switch between major sections of a web site.

Pre-requisites:

• An exisiting, multi-tiered website
• The navbar on the top of a page should fulfill three different functions.
  1. It should allow the users to move laterally through the website, to thematically different sections
  2. It should provide a link to the bottom of the page to skip content
  3. It should provide an "up" link to reach the next higher level in the thematic structure
• The navbar on top of the page should have no more than five items, including the standard up and down links
• The navbar relies on other links being placed within the content, to allow users to preform very specific jumps

• The top of page navbar should be supplemented by a bottom of page navbar (CategoryBpBalance)

Implementation Steps:

• Determine the thematic structure of the content in the web site and identify large sections.
• The top navbar should navigate laterally, between thematic sections of the website
• If a flat navigational structure is present, it may be useful, instead of an "up" link, to provide a "home" link.
• Use the same pattern for each section of the web sites, but do vary the links as needed of course
• There should be a navbar at top and there may be a navbar at the bottom of each page
• The top of page navbar should have as the link furthest to the left a "down" link to reach the bottom of the page.
• The top of page navbar should have an "up" or "home" link as second from the left link.

Top of page navbar example

This could be a top of page navbar for site selling mobile devices, within its catalog

• Down Up Phone Tablet PDA

Within the phone section, the following navbar may be found

• Down Up Internet Business New

Back to BestPracticesList

CategoryPhp CategoryXhtml CategoryBpBalance CategoryBpNavbar CategoryBpNavbar