Manually Set an Item as Active
Any item can be set to active
to indicate that the page is anchored to the respective section.
Important Notes:
When using plain HTML to make a Table Of Contents have a default active section, add a c-bolt-toc__item--current
class to the desired Table of Content item.
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',
active: true
} only %}
{% include '@bolt-components-toc/toc-item.twig' with {
text: 'Section Three',
url: '#section-three',
} 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 c-bolt-toc__item--current">
Section Two
</a>
</li>
<li>
<a href="#section-three" class="c-bolt-toc__item">
Section Three
</a>
</li>
</ul>
</nav>
</div>