Skip to main content
Search

Primary navigation

The primary navigation is a series of menus used to navigate around and access content within the website. Navigation should be logically categorised based on user research and business needs.

Our navigation has been designed to factor in 3 levels of content:

  1. Primary
  2. Secondary
  3. Tertiary

Our primary navigation will switch to a hamburger menu design pattern when the screen is too small to accommodate the full menu.

Related

Primary navigation

primary-navigation.svg

Usage guidelines

Do's

  • Primary navigation for websites should always be a horizontal menu
  • On smaller devices the navigation must use a hamburger menu
  • Navigation items are displayed sentence case
  • Titles should be written in a way that considers the width and depth of the navigation space
  • All navigation should be referenced against IA rationale
  • The company logo displayed in the primary navigation must have the alt attribute set as the name of the company

Dont's

  • Primary navigation items should not exceed 5 items
  • Secondary navigation items should not exceed 6 items
  • Tertiary navigation items should not exceed 8 items
  • If using a decscription/button in the tertiary navigation then 3 items are permitted below this
  • Avoid linking to external sites from the primary navigation.

Behaviour

  • Primary navigation items can be used as a single link or with the mega menu
  • If there is a tertiary menu then secondary items will reveal these options as a flyout
  • Secondary items can be used as a standalone link
  • On hover, selected state should appear. Additional menus only appear on click
  • Mega menus sits on top of all other page content
  • When the navigation scrolls out of view the primary navigation sticks to the top of the viewable window and remains persistent