Skip to content

Table of Contents

Displays a list of links to headings in the current page.

Anatomy

  1. Items

Usage Guidelines

Lists links to heading elements in the page. Each top level item can have a nested list of sub-items which will create an indented inner list. There are no direct restrictions on which heading levels are included or excluded, rather that is up to the logic of the template that this component is used in. All it expects is that each entry will have a heading element with matching ID attribute so that the link works correctly.

Accessibility

If using this as a primary means of navigation in a page or site, it should be wrapped in a nav element with an appropriate aria-label so that screen readers can jump to it along with any other nav elements on the page.

WordPress

This component is inserted on single article pages if enabled in the admin for a particular post. The post content is scanned for any heading elements, which will be included in the table of contents; Individual headings in the content can be excluded by adding a class of exclude-from-toc.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
itemsarray heading itemsYes-
└ itemobject single entry for a heading on the page--
└ textstring heading element textYes-
└ idstring unique HTML id attribute on heading elementYes-
└ itemsarray nested list of sub-itemsNo-
└ itemobject single nested entry...--

Changelog

1.34.0

  • table-of-contents added

Examples

Default

{{ include( 'components/table-of-contents.twig', {
	items: {...}
} ) }}