Bolt Design System

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

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

npm install @bolt/components-toc

Dependencies

@bolt/components-smooth-scroll

@bolt/core-v3.x

@bolt/lazy-queue

wc-context

Toc

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