Providing navigation

Providing consistent navigation within your site is important, it allows users to find their way around your site and provides an indication of the themes and scope of your site. Navigation can also be used to indicate your current location within the context of the site structure.

Scope and structure

This template makes provision for contextual navigation: the navigation bar gives users an idea of their current location in the site. Links to the main sections in the site are collected in a list. Links to the sub-sections of the current section are listed in a seperate list located within the additionalOne div. In this way the structure of the navigation reflects the logical structure of the site.

The navigation also gives a visual clue of the current location by highlighting the section you are in and the page you are on. When you are on a page that is linked to from the navigation bar, the link tag is replaced by a <span> tag with an id="youarehere" to prevent pages linking to themselves; this span is then styled in a slightly different manner. The <li>relating to the current section is given an attribute of class="currentsection", which is then styled in a different manner.

Dealing with context

Indicating the current location within the site structure can be achieved in several ways. For large sites with deep structure (i.e. where there are many pages four or more levels down from the home page) then a breadcrumb trail may be appropriate, where the current location's structural relation the homepage is shown.

Many sites do not 'drill down' more than three levels, or may only have relatively few fourth-level pages.. In such cases, simply highlighting the current section within the navigation bar can usually adequately indicate context.

Another indication of context is achieved by avoiding recursive linking within navigation; in other words, preventing pages from linking to themselves. Recursive linking is best avoided because it undermines the logic of context-sensitivity and can cause confusion amongst users. This is particularly true for blind users, who do not have the benefit of other visual clues which indicate your current context. Recursive linking is easily avoided by disabling the link to the current page in the navigation. In this template, this is achieved by replacing the <a> tag for the relevant page with a <span> tag with an id="youarehere" attribute which can then be styled to highlight that item within the navigation.

This is div#additionalOne - a div for including the sub-navigation (when needed) as well as additional content such as latest news, etc...

additional content goes here

This is div#additionalTwo - a div for including additional content such as latest news, etc...