In-page table of contents: Canada.ca design

When to use

Use the in-page table of contents pattern to:

• provide an outline for the content of a single page that has multiple subsections
• provide an alternative method to jump to specific content on the page, without using the scroll bar

Use this pattern when:

• excessive scrolling is required to view all of the content on the page
• the page is divided into subsections, each with its own headings

What to avoid

Do not use this pattern when the document exists across several web pages. Instead, use the multi-page table of contents pattern.

Content and design

• Always position the in-page table of contents pattern at the top of the page, just below the H1 and any introductory text, before the main content begins
• Label the pattern “On this page” to distinguish it from other page content and to provide consistency throughout the site
• Use list elements to present links: use bullets for an unordered list and numbers for an ordered list
• Use standard link styles to make sure the links appear as clickable elements
• Present the in-page table of contents aligned to the left, as a vertical list, as opposed to using a column layout

Visual example

Image description

The heading "On this page" is written in bold, black font above a list of links. Below the heading is a bulleted vertical list containing three items:

• First section heading
• Second section heading
• Third section heading

Each item in the list is a blue, underlined hyperlink, indicating that users can click them to quickly jump to the corresponding sections on the same page.

How to implement

GCWeb (WET) theme implementation reference

• In-page table of contents (GCWeb)

Latest changes

2025-08-20

Revised the visual examples and headings on the page to align more closely with our newer guidance pieces. Added links to the GCWeb implementation for easier reference.