Table of Contents
Anatomy
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
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
Default
{{ include( 'components/table-of-contents.twig', { items: {...} } ) }}