Use Case: Sticky Table of Contents in a Grid
Table of Contents can be manually set to sticky position via the sticky prop.
Important Notes:Additional prop scroll_offset is available to adjust the sticky placement in relation to other sticky elements on the same page.For plain HTML use a data attrbiute data-bolt-scroll-offset="{integer}", for example data-bolt-scroll-offset="20"
{% 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: 'Table of Contents',
content: toc_items,
sticky: true,
scroll_offset: 20,
} only %}
HTML
<div class="c-bolt-toc c-bolt-toc--sticky" data-bolt-scroll-offset="20">
<nav aria-label="Table of Contents with a sticky position">
<h2 class="c-bolt-toc__header">
Table of Contents with a sticky position
</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>