A configurable table of contents is included with all of our themes. By default it displays links for every
<h2> heading in your article content within a stylish element at the top of the page or in a sidebar. There’s no need to copy and paste any HTML or make changes to your article content or page templates.
Our themes allows you to select from one of several built-in table of contents styles using the Table of Contents theme setting in the Article page elements setting group.
Combining a table of contents with our Scrollspy extension allows you to create floating elements that track the visitor’s position on the page as they scroll. For more examples, take a look at our Table of Contents patterns.
The table of contents will inherit the overall style of the theme as defined in your theme settings. The heading above the links is also configurable within theme settings. You can customize the Table of Contents further, both in terms of its appearance and functionality, through extension options and custom micro-templates.
Creating a table of contents
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
The Table of Contents extension is bundled into all of our themes by default, so you can start using it straight away. You can find the source code for the extension within the
extensions.(min.)js file in the theme’s Assets folder.
|parentElement|| || ||The element in which all elements considered by the extension are contained.|
|selector|| || ||The CSS selector used to identify sections.|
|anchorLinks|| || ||True if the extension should generate anchor links for headings.|
|generateIds|| || ||True if the extension 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 micro-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.|