In-page table of contents design pattern: Canada.ca design system

Objective

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

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

How and when to use an in-page table of contents

• Always position the in-page table of contents pattern at the start of the page, before the substantive content of the page begins
• Label the pattern “On this page” to distinguish it from other page content and to provide consistency throughout the site
• Present links using list elements—bullets for an unordered list, numbers for an ordered list
• Use standard linking styles to ensure that the links present 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