Page navigation

Page navigation lists and links to the level 2 headings (H2) of a webpage. It is placed at the top of the page. People can select a link to go directly to that section.

This makes it easy to see what's on a page. It allows people to scan a page and know if they're in the right place.


Automatic generation

To generate "On this page" navigation automatically insert following code after your h1 heading:

Headings IDs

With automatic page generation you don't have to add ID attributes into your h2 headings. Those IDs will be added automatically based on h2 heading text. For instance, if h2 text is "List accordion" the corresponding ID attribute will be id="List-accordion" . But if you prefer to use non-automatic page navigation then you will have to add IDs to each h2 heading and add anchor links to those h2 headings in your page navigation manually.


When and how to use it

Use page navigation when you have at least two sections of content on your page. Anchor links are split into two columns if there are six or more sections. If the section is uneven, the second column will have one less link.

How not to use it

Do not use the page navigation to anchor to H3s or H4s on your page. This is for navigation, not outlining content.


Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes