Toc

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

Published Last updated: 4.2.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