Three levels

Each level in the side nav needs to be easily visually identifiable as a new level. Beyond 3 levels, visual solutions quickly become too complex or drastically reduce the available line length for links.

After reviewing multiple government and private sector websites, it was found that the upper extent of complex navigation solutions tended to be around 5 levels. To avoid overly complex user interfaces the navigation is often split into groups.

The best examples of navigation for a user where:

• One level in a main menu
• Landing page containing a list of second level links
• Three levels in a side navigation, inlcuding:
  • Active state in main menu
  • Title in side navigation for second level
  • Breadcrumbs

Active state

The active state is intended to show which page the user is currently on. It uses a bold/strong style (that is, something other than colour) in order to meet Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1.

Styles for the collapsed element

It was found through usability testing that the collapsed navigation on mobile was often overlooked by users because it was too subtle. A revision was made to make the collapsed navigation similar to the accordion and tertiary button styles in order to be more identifiable as a possible action.