Skip to main content

Navigation Design Guidelines

Keep it simple and remove unnecessary items​

  • Reduce the cognitive load on users and make it easy for them to quickly scan and find what they need

Use concise and familiar language which sets clear expectations to users​

  • Avoid jargon, acronyms or vague terms
  • Use simple and short language

Avoid submenus unless absolutely needed​

  • Submenus can be overwhelming for users as they increase the cognitive load of navigation interaction
  • They can be more difficult to navigate via screen readers
  • The user should be easily able to find the navigation no matter where they are in the site
  • It should work well and consistently across viewport sizes

Follow conventions and use best practice​

  • Use patterns and symbols that are easily recognisable to users
  • Use standard terms and orders users recognise, such as alphabetical

Provide visual cues as to where the user is in the site​

  • Highlight where in the navigation the user is if appropriate
  • Visually show the user their navigation path through breadcrumbs or progress bars
  • Enable users to feel confident in understanding where in the site’s structure they are and help them navigate back to a previous section

Be consistent in navigation design across the site​

  • Ensure all navigation across a site works in a consistent way so users know they are in the same site ecosystem. This increases a user’s sense of security when using a site.

Logged in experience​

  • Navigation items can be added when a user logs in but otherwise navigation items should remain consistent between the non-logged in and logged in experience

Build an accessible navigation​

  • Help users understand the purpose of every link before they them
  • Link text should be explicit and set clear expectations of where it leads to
  • Use clear styles for hover and focus states
  • Ensure menus are keyboard operable
  • Page titles should be unique and descriptive
  • Ensure navigation build is WCAG AAA compliant

Design with mobile in mind​

  • Ensure the target size of menu items is large enough to be easily clickable
  • Use visual indicators where relevant to aid in users’ understanding

Align navigation design with a user’s goals​

  • Identify key user needs and design the navigation to meet these
  • Provide multiple ways to navigate a site and find content which align with the different mental models users may have
  • Use search, in-page navigation as well as menus to support users in finding what they need