1. Home
  2. 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.
Fecha de la última revisión: