Components

Page Table of Contents

Display a table of contents for the current page.

Usage

The Page TOC component can be used to display an organized table of contents for the current page's content headings.

This component should typically be utilized in a Snippet and mapped to a Page Layout location.

As the user scrolls down the page, the active link will be updated to reflect the heading that corresponds to the URL hash. Clicking on an item in the Page TOC will scroll the page to the linked heading.

The "On this page" sidebar displayed on the right of this page is a working example of the Page TOC component.

::page-toc
---
title: "On this page"
depth: 3
---
::
PageToc Component Props

The text to display in the TOC heading

The depth of page headings to parse. Accepts a number between 1 and 5. Defaults to `3`.

Props

title

The heading text to display at the top of the table of contents.

  • Type: string
  • Default: 'On this page'

depth

The maximum heading depth to include in the table of contents. Accepts a number between 2 and 5.

  • Type: number
  • Default: 3

As an example, if you'd like to display all of the H2 and H3 headings on the page, set the value to 3.

Shared Props

This component also includes the shared props listed below:

  • background - default is initial.
  • backgroundColor - default is initial.
  • border - default is initial.
  • borderRadius - default is 0px.
  • color - default is initial.
  • margin - default is 0px.
  • padding - default is 20px.
  • styles - default is ''.

See here for more information on shared props.