Basic Table of Contents
Table of Contents is a list of anchor links that match the section headings of an article or page.
Important Notes:
Each item url should match the id
of the particular section container or section heading.
When using plain HTML:
To adhere to accessibility guidelines, always add aria-label
attribute to the nav
element with the Table of Contents header text as the value.
If you decide to not have a Table of Contents header, it is recommended to still add a h2
heading with a c-bolt-toc__header--hidden
class. This will hide the heading visually, but still will be accessible for screen readers.
Demo
Twig
{% set toc_items %}
{% include '@bolt-components-toc/toc-item.twig' with {
text: 'Section One',
url: '#section-one',
} only %}
{% include '@bolt-components-toc/toc-item.twig' with {
text: 'Section Two',
url: '#section-two',
} only %}
{% include '@bolt-components-toc/toc-item.twig' with {
text: 'Section Three',
url: '#section-three',
} only %}
{% include '@bolt-components-toc/toc-item.twig' with {
text: 'Section Four',
url: '#section-four',
} only %}
{% include '@bolt-components-toc/toc-item.twig' with {
text: 'Section Five',
url: '#section-five',
} only %}
{% endset %}
{% include '@bolt-components-toc/toc.twig' with {
content: toc_items
} only %}
HTML
<div class="c-bolt-toc">
<nav aria-label="Table of Contents">
<h2 class="c-bolt-toc__header c-bolt-toc__header--hidden">
Table of Contents
</h2>
<ul class="c-bolt-toc__list">
<li>
<a href="#section-one" class="c-bolt-toc__item">
Section One
</a>
</li>
<li>
<a href="#section-two" class="c-bolt-toc__item">
Section Two
</a>
</li>
<li>
<a href="#section-three" class="c-bolt-toc__item">
Section Three
</a>
</li>
</ul>
</nav>
</div>