Language selection


In-page table of contents design pattern: design system

The in-page table of contents pattern is a list of links that lead to subsections of the same page. This pattern is intended for long documents that exist as a single page.


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
Figure 23. In-page table of contents pattern
Image of in-page table of contents pattern. Details on this graphic can be found in the surrounding text.

Page details

Date modified: