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

Property	Type	Description	Required	Default
items	`array`	heading items	Yes	-
└ item	`object`	single entry for a heading on the page	-	-
└ text	`string`	heading element text	Yes	-
└ id	`string`	unique HTML id attribute on heading element	Yes	-
└ items	`array`	nested list of sub-items	No	-
└ item	`object`	single nested entry...	-	-

Changelog

1.34.0

table-of-contents added

Examples

Ligula Inceptos - Level 1 A
1. Commodo Purus - Level 2 A
2. Risus Ullamcorper - Level 2 B
Magna Mattis - Level 1 B
Tortor Fringilla - Level 1 C
Pellentesque Vehicula - Level 1 D

Code

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

Table of Contents