Table of contents
Table of contents
Introduction
Use a table of contents to provide quick access to different sections of a page’s content.
A table of contents uses heading tags within the page to outline its content.
Interactive example
Latte
A coffee drink made with a shot or two of espresso, a larger portion of steamed milk, and a thin layer of milk foam on top.
Cappuccino
A coffee drink traditionally made from an espresso base, hot steamed milk, and a thick layer of milk foam.
Espresso
A concentrated coffee beverage produced by forcing hot, high-pressure water through finely ground coffee beans.
When to use
Use a table of contents to provide a secondary method to navigate through the page’s headings instead of needing to scroll.
Use a table of contents only when the page contains a lot of content with many defined headings.
Display multiple heading levels in a table of contents for particularly content rich pages.
When not to use
Do not use a table of contents as a primary form of navigation. Table of contents links should not be used to navigate to different pages.
Do not use a table of contents if you have fewer than two headings on a page.
Avoid using a table of contents to display the page's entire heading structure, as this can be navigated by simply scrolling through the page. Instead, provide links to the top-level headings for quick access to key sections.
Interaction behaviour
A table of contents that is longer than the viewport height will be scrollable independent to the page scroll. However, try to avoid including so many headings that it causes the table of contents to exceed the viewport height. Set only the top-level heading types to display to keep the table of contents short.
Headings in the table of contents become automatically selected as they are scrolled into view. Set the selection threshold from the bottom of the viewport to change the point at which the next heading in the table of contents becomes selected.
When a table of contents is positioned at the side of the page, it is sticky on page scroll to keep it in view and provide a constant method to move between page content.
When a table of contents is positioned at the top of the page, it will scroll along with the page content.
Colour
Use the dark or light variants to achieve colour contrast compliance when placed on different coloured backgrounds.
Sizing
Use the large size variant to create more spacious layouts for your table of contents. Only use this when there is sufficient screen space to avoid the table of contents scrolling.
Layout and placement
On larger screen sizes, place the table of contents to the right of the page content it controls.
Do not place table of contents on the side of a screen when using smaller screen sizes, place it at the top of the page.
Content
Use a maximum of three heading levels within the table of contents, from H2 to H4. Going beyond this can lead to an overly long table of contents that doesn't aid the navigation of the page as well.
When titling a table of contents, make sure that the title is relevant to the page content. For example, use the page’s title or the term ‘Table of contents’.
Always make sure each heading within your page structure is relevant to the content it includes.
Relevant headings within the page content allow people to navigate using the table of contents to skip over content if it is not relevant. A good page table of contents can be understood by simply reading through its headings.