toc docs

Toc

A navigation list, usually found on an article page, of its section titles.
Twig Usage 
{% 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 %}
 Schema
Toc (toc.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-toc> tag.

 object —
  • —
header

Renders a header for the table of contents. If not specified, the default value will be used and the header will be visually hidden but accessible to screen readers.

 string Table of Contents
  • —
sticky

When enabled, TOC will automatically use sticky positioning + add a top offset style based on the height of the header and/or any other sticky elements + the scroll_offset height (if defined),

 boolean —
  • —
variant

Set the visual variant.

 string card
  • transparent or card
scroll_offset

Additional offset for smooth scrolling, an integer converted to pixel value.

 integer —
  • —
content

Generates toc items. Accepts @bolt-components-toc-item

 object —
  • —
Toc item (toc-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-toc> tag.

 object —
  • —
text

Renders the text for the linked item.

 string —
  • —
url

Renders the href for the linked item. This should be the id of the responding section. For example: #section-one-name.

 string —
  • —
active

Indicates that the item represents the current section being viewed.

 boolean —
  • —
Install Install 
npm install @bolt/components-toc
Dependencies @bolt/components-smooth-scroll @bolt/core

toc

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>

toc item active variations

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>

toc header variations

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>

toc variants variations

Visual Variant By default, the Table of Contents is set to the card variant, but it can be changed to transparent via the variant prop.
Important Notes: When using plain HTML to make a Table Of Contents transparent, add c-bolt-toc--variant-transparent class.
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 transparent variant',
  content: toc_items,
  variant: 'transparent',
} only %}
HTML
<div class="c-bolt-toc c-bolt-toc--variant-transparent">
  <nav aria-label="This is the transparent variant">
    <h2 class="c-bolt-toc__header">
      This is the transparent variant
    </h2>
    <ul class="c-bolt-toc__list">
      <li>
        <a href="#section-one" class="c-bolt-toc__item c-bolt-toc__item--current">
          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>

Sticky Scrolling

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"
Demo View full page 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: '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>