Visible Header
A header for Table Of Contents can be created by passing plain text into the header
prop.
Important Notes:
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
header 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 %}
{% endset %}
{% include '@bolt-components-toc/toc.twig' with {
header: 'This is the header',
content: toc_items
} only %}
HTML
<div class="c-bolt-toc">
<nav aria-label="This is the header">
<h2 class="c-bolt-toc__header">
This is the header
</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>