Language selection

Table of contents – GCWeb design system

Use a table of contents to link to subsections of content found on a single page.

On this page

When to use

Use a table of contents to provide:

Use when

  • excessive scrolling (more than two to three scrolls) 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 when

  • the document exists across several web pages
  • the page solely consists of tables, images, etc. with no headers

How to implement

When linking to the headings further down the same page

The table of contents section should be included when there are more than two headers/subheaders and you need to scroll to see all the content on the page.

Correct use

  • Label the table of contents as On this page to distinguish it from other page content and to provide consistency throughout the site
  • The On this page section should be placed below the h1 and the short description of the page, but before the substantive content of the page begins
    • In some cases, other components, such as images or alerts, can also be placed before the table of contents
  • 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 table of contents aligned to the left, as a vertical list, as opposed to using a column layout

Incorrect use

  • Avoid lists that are more than three levels deep
    • Include mainly h2 headings in the table of contents
    • If content requires further detail, and there is user value, include selective h3 headings in the table of contents

Options

  • Include H3 subheadings
Appearance

On this page

HTML code 
<h2 class="h3">On this page</h2>
    <ul>
      <li><a href="h-1">First H2 on the page</a></li>
      <li><a href="h-2">Second H2 on the page</a></li>  
      <li><a href="h-3">Third H2 on the page</a></li>
    </ul>

When used as an index page to link to other pages

Place the table of contents on its own page to act as a directory of subpages within a specific product.

Correct use

  • Label the table of contents as Table of contents
  • Use list columns if the link titles look crowded in the default design or when multiple columns of links look best using the entire available width

Incorrect use

  • Avoid multi-column lists that are more than one level deep. If multiple levels and multiple columns are needed,
    • Break the multi-column lists into separate groups
    • Place them in grids, so the nested levels are always associated with the parent list

Options

  • Default
  • 2 columns
  • 3 columns
Appearance

Table of contents

HTML code 
<h2 class="h3 mrgn-tp-0">Table of contents</h2>
    <ul>
      <li><a href="#">First page</a>
      <ul>
          <li><a href="#">Subsection 1</a></li>
          <li><a href="#">Subsection 2</a></li>
        </ul>
      </li>
      <li><a href="#">Second page</a></li>
      <li><a href="#">Third page</a></li>
      <li><a href="#">Fourth page</a></li>
      <li><a href="#">Fifth page</a></li>
      <li><a href="#">Sixth page</a></li>
    </ul>

Complementary components

Additional add-on features and behaviours are available.

Date modified: