McMaster University

Faculty of Health Sciences
Web Design

Scope of Search

Navigation Design

The McMaster web design has both a left navigation and a top navigation.  Both are a set of links contained in an unodered list. If your website belongs to university administration or one of the Faculties, the top navigation for your site will be the global navigation from the main McMaster website, and the left navigation will be the primary navigation for your site. If your website belongs to another area such as a department, you are only required to reserve the leftmost link in the top navigation for a link to the main McMaster website. The remaining links in the top navigation are free for your website to use as its primary navigation, and the left navigation may optionally be used as secondary navigation. Tertiary navigation links may also be put in the content areas for yoru site.

When you first start thinking about how you want to organize your website, however, it is better not to think about navigation bars and links, but rather you may create an outline of the topics you want to cover and organize the topics in a hierarchical structure, just as you might have done before writing a research paper, as follows:

  1. Topic 1
    1. Topic 1A
      1. Topic 1A.1
      2. Topic 1A.2
      3. Topic 1A.3
      4. And so on …

  2. Topic 2
  3. Topic 3
    1. Topic 1A
      1. Topic 1A.1
      2. Topic 1A.2
        1. Topic 1A.2a
        2. Topic 1A.2b
        3. Topic 1A.2c
        4. And so on …

      3. Topic 1A.3
      4. And so on …

  4. Topic 4
  5. And so on …

This outline is then used make a navigation structure on a website. The example above has 4 levels. The fewer levels you have, the less complicated your site will be to navigate and for people to find information.

The first level in the hierarchy above (I, II, III, IV, ...) translates to the first level in the primary navigation for a site. If the primary navigation is the top navigation bar, then this level repesents links that are displayed without the drop-down. If the primary navigation is the left side navigation, then this level represents links that are displayed without the break downs.

The second level in the hirearchy (A, B, C, ...) translates to the second level in the primary navigation for a site. If the primary navigation is the top navigation bar, then this level represents links in the first drop down when the cursor hovers over the link above the drop down. If the primary navigation is the left, then this level represents links that are displayed at the first break down when the link above is clicked.

The third level in the hierarchy (1, 2, 3, ...) may translate to the third level in the primary navigation for a site or it can translate to the first level of the secondary navigation depending on how you want your website to be navigated.