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.
Sample
Two to five links
Six or more links
Two to five links
Six or more links
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.
Usage
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.
Accessibility
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