Navigation best practices
- Make navigation terms or labels as descriptive and straightforward as possible. Don't use clever or unusual naming schemes -- they could confuse users.
- Make sure your overall navigation structure will still work if there are additions to the site later. You don't want to have to revise the navigation structure on each page every time a new page is added.
- All navigation items should link only to pages within the site and not to other websites. Important links that don't link to pages within the site should be listed in the right side accordion menu (expand/collapse areas).
- Items placed at the start and end of lists are often the most visible/visited items.
- Always include a link in your page's text to important navigation information.
- Provide the shortest possible routes to information. For example, don't force users to click through your mission statement and annual report to reach contact details.
- All links should have text that is meaningful. For example, "... see the viewbook for more information" rather than "click here for more information... ".
- Make sure your navigation items are in sentence case (capitalize only the first word unless the word's a proper noun).
- For pages with a lot of content, use the content area "tabs" to group content into smaller chunks.
What to avoid
- Navigation items should not link to non-html files (e.g., .pdf, .xls, etc). If you need to link to these, include the links in the main content area, below the navigation on the left side, or in the right column under the accordion menu. These types of documents should be displayed in a consistent manner throughout the site with their name, link, and document size and format. (E.g. Faculty of Law Calendar (PDF, 500k) ) [note: there is a style in Cascade which contains a PDF icon/Word icon].
- Don't use "click here" for links. Attach the link to descriptive text. For example, "... see the viewbook for more information" rather than "click here for more information... ".
- Navigation items should not link to external sites. This is confusing for users as they are not aware they're about to leave your site. External links can be put under links of interest in the right side accordion. For very prominent links you can use the buttons described below.
- Primary and sub-primary navigation (horizontal tabs) contains links to your top-level pages and are audience-oriented or topical in nature.
- Secondary and sub-secondary navigation items are specific to a particular primary section, are generally topical and are listed in the left column (left menu).
- Tertiary navigation items are often global to the site but can be specific to a particular section, are generally topical and are listed in the left column below the secondary navigation.
- All navigation items should link only to pages within your site. They should not go to other websites or documents.
Primary navigation (top tabs) refers to the main links that divide the site into targeted sections. This navigation helps users find information by audience (prospective students, alumni, etc.) or topic (continuing studies, job postings, etc.).
Primary navigation often has sub-navigation items (displayed when you roll your mouse directly below the primary navigation), which are called primary sub-navigation items.
- Primary navigation should be limited to four to six items.
- Primary sub-navigation should be limited to no more than five items.
Secondary navigation (left menu) shows links that are specific to a particular section. It helps users find information by topic (explore UVic, apply for admission, etc.).
We recommend that these links appear only within pages belonging to that section.
- Generally, secondary menus should be limited to four to ten links.
- Secondary navigation often has sub-secondary navigation items, which should be limited to four to six items.
Tertiary navigation (left menu below secondary navigation) contains links that are usually consistent throughout the site (contact us; news and events).
- Generally, these should be limited to one or two links.