Bolt Design System

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>