1. Home
  2. Design System
  3. Components
  4. Sub-navigation

Sub-navigation

A sub-navigation displays an extra set of navigation links for the current section of a website. This allows users to easily navigate between pages.

Where it goes: Left of the main content

Required or optional: Optional

Use:

  • When there are a lot of pages under the same topic within one section of a website, and users are likely to want to navigate between pages.
  • When you want to make it easier for users to discover content.
  • To act as a table of contents when you have report-type content that you’ve broken up into sections.

Don’t use: Small websites (e.g., a site with fewer than five pages)

Usability notes

Keep the navigation links short. A navigation link does not need to be the same as the title of the page it links to, if you can convey the same meaning in a shorter word/phrase.

Accessibility notes

Ensure the side navigational system is keyboard accessible. Users should be able to tab through each link.

Example

One level

An example of a vertical navigation pictured under a breadcrumb. All the navigation items are at the same level.

Two levels

An example of a vertical navigation. Some of the items are slightly indented to show they are a different level of navigation.

Three levels

An example of a vertical navigation. Some items are slightly indented to show they are at a different level, with additional items indented even further to show they are at the third level.

Live examples

A screenshot of a web page with a navigation on the left side of the screen. It shows the current page title at the top of the navigation, with sub items indented below that.
A screenshot of a web page with a navigation on the left side of the screen. There is only one level of navigation, and the current page title is not included in the navigation.
Date Last Reviewed: