Navigation bar

The navigation bar pattern displays a horizontal navigation menu for pages related to the current page.

Rules for the navigation bar

  • Must be present on all webpages, apart from long-form stories and web applications.
  • Must come below the category header and above the breadcrumbs and main body of the page.
  • Must not contain any dropdown menus.
  • Must only contain links to other webpages or web applications.
  • The link with highest priority should be placed at the left hand side, with other links following in order of importance.
  • Link titles should be concise, with the list of links kept to a single horizontal row.

Options available

Primary navigation

The primary navigation menu is required on all top-level pages and must use the primary palette colour.

Example
Code

Primary and secondary navigation

The secondary navigation bar is required on all subpages of a section and must use the secondary palette colour.

Example
Code