In this article
Commonly used on the Article page, the Table of Contents plugin provides an overview of the structure of the page and links to each section. The plugin automatically generates the collection of links based on headings (by default
<h2> tags) within the article content.
Current versions of our themes allow you to enable Table of Contents elements on Article pages using theme settings. Once enabled, a Table of Contents will be displayed for all articles that have two or more
By default an unstyled list is produced however you can style and customize the Table of Contents both in terms of its look-and-feel and functionality.
An example of a Table of Contents with extra functionality provided by our Scrollspy plugin can be found in our Kai theme.
Via data attributes
You can use data attributes to create a new Table of Contents and specify values for the available options.
data-element="table-of-contents" attribute is used to convert an element into a Table of Contents on page load.
Because data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.
For data attributes, append the option name to
|parentElement|| || ||The element in which all elements considered by the plugin are contained.|
|selector|| || ||The CSS selector used to identify sections.|
|generateIds|| || ||True if the plugin should generate IDs for headings that don’t already have one. If false, headings without an ID will not be included.|
|template|| || ||The name of the template to use.|
|templateData|| || ||Additional data to provide to the template rendering function.|
| ||Fires when the table of contents markup has been rendered and inserted into the DOM.|