toc docs

Toc

A navigation list, usually found on an article page, of its section titles.

Published Last updated: 4.4.0 Change log Github NPM
Twig Usage 
{% include '@bolt-components-toc/toc.twig' with {
  header: 'This is the header',
  items: [
    {
      text: 'Section One',
      url: '#section-one',
    },
    {
      text: 'Section Two',
      url: '#section-two',
    },
    {
      text: 'Section Three',
      url: '#section-three',
    },
  ]
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Table of Contents
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
sticky

When enabled, TOC will automatically use sticky positioning + add a top offset style based on the height of the scrollOffsetSelector plus the scrollOffset (if defined),

 boolean —
  • —
scrollOffsetSelector

Selects a fixed element on the page, offsets smooth scrolling by the height of that element. Must be a valid CSS selector.

 string —
  • —
scrollOffset

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

 integer —
  • —
variant

Set the visual variant.

 string card
  • transparent or card
items

Generates an array of items. The items represent the headlines of top level sections in an article.

 array —
  • See below
header

Renders a header for the table of contents.

 string —
  • —
uuid

Unique ID for the table of contents, randomly generated if not provided.

 string —
  • —
Table of Contents: items
Prop Name Description Type Default Value Option(s)
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-v3.x @bolt/lazy-queue wc-context

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’s url should match the id of the particular section container or section heading. Demo
Twig
{% include '@bolt-components-toc/toc.twig' with {
  items: [
    {
      text: 'Section One',
      url: '#section-one',
    },
    {
      text: 'Section Two',
      url: '#section-two',
    },
    {
      text: 'Section Three',
      url: '#section-three',
    },
    {
      text: 'Section Four',
      url: '#section-four',
    },
    {
      text: 'Section Five',
      url: '#section-five',
    },
  ]
} only %}
HTML
<bolt-toc>
  <bolt-toc-item url="#section-one">
    Section One
  </bolt-toc-item>
  <bolt-toc-item url="#section-two">
    Section Two
  </bolt-toc-item>
  <bolt-toc-item url="#section-three">
    Section Three
  </bolt-toc-item>
  <bolt-toc-item url="#section-four">
    Section Four
  </bolt-toc-item>
  <bolt-toc-item url="#section-five">
    Section Five
  </bolt-toc-item>
</bolt-toc>

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. Demo
Twig
{% include '@bolt-components-toc/toc.twig' with {
  items: [
    {
      text: 'Section One',
      url: '#section-one',
    },
    {
      text: 'Section Two',
      url: '#section-two',
      active: true,
    },
    {
      text: 'Section Three',
      url: '#section-three',
    },
  ]
} only %}
HTML
<bolt-toc>
  <bolt-toc-item url="#section-one">
    Section One
  </bolt-toc-item>
  <bolt-toc-item url="#section-two" active>
    Section Two
  </bolt-toc-item>
  <bolt-toc-item url="#section-three">
    Section Three
  </bolt-toc-item>
</bolt-toc>

toc header variations

Visible Header A header for table of contents can be created by passing plain text into the header prop. Demo
Twig
{% include '@bolt-components-toc/toc.twig' with {
  header: 'This is the header',
  items: [
    {
      text: 'Section One',
      url: '#section-one',
    },
    {
      text: 'Section Two',
      url: '#section-two',
    },
    {
      text: 'Section Three',
      url: '#section-three',
    },
  ]
} only %}
HTML
<bolt-toc header="This is the header">
  <bolt-toc-item url="#section-one">
    Section One
  </bolt-toc-item>
  <bolt-toc-item url="#section-two">
    Section Two
  </bolt-toc-item>
  <bolt-toc-item url="#section-three">
    Section Three
  </bolt-toc-item>
</bolt-toc>

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. Demo
Twig
{% include '@bolt-components-toc/toc.twig' with {
  header: 'This is the transparent variant',
  items: [
    {
      text: 'Section One',
      url: '#section-one',
      active: true,
    },
    {
      text: 'Section Two',
      url: '#section-two',
    },
    {
      text: 'Section Three',
      url: '#section-three',
    },
  ],
  variant: 'transparent',
} only %}
HTML
<bolt-toc header="This is the transparent variant" variant="transparent">
  <bolt-toc-item url="#section-one" active>
    Section One
  </bolt-toc-item>
  <bolt-toc-item url="#section-two">
    Section Two
  </bolt-toc-item>
  <bolt-toc-item url="#section-three">
    Section Three
  </bolt-toc-item>
</bolt-toc>

toc use case sticky

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 props are available to adjust the sticky placement in relation to other sticky elements on the same page: scrollOffsetSelector and scrollOffset. Demo
Example Additional Sticky Element

Section One

Iron Man. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat.

Section Two

Iron Man 3. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et.

Section Three

Captain America: Civil War. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum.

Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet.
Twig
{% include '@bolt-components-toc/toc.twig' with {
  header: 'Table of Contents',
  items: [
    {
      text: 'Section One',
      url: '#section-one',
    },
    {
      text: 'Section Two',
      url: '#section-two',
    },
    {
      text: 'Section Three',
      url: '#section-three',
    },
  ],
  sticky: true,
  scrollOffsetSelector: '.js-sticky-target',
  scrollOffset: 20,
} only %}
HTML
<bolt-toc header="Table of Contents" sticky scroll-offset-selector=".js-sticky-target" scroll-offset=20>
  <bolt-toc-item url="#section-one">
    Section One
  </bolt-toc-item>
  <bolt-toc-item url="#section-two">
    Section Two
  </bolt-toc-item>
  <bolt-toc-item url="#section-three">
    Section Three
  </bolt-toc-item>
</bolt-toc>