Toc

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

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