Bolt Design System

Twig Usage

  {% include "@bolt-components-toc/toc.twig" with {
  items: [
    {
      text: "Section 1",
      url: "#section-1"
    },
    {
      text: "Section 2",
      url: "#section-2"
    },
  ]
} only %}

Schema

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`	—	—
items	Generates an array of items. The items represent the headlines of top level sections in an article.	`array`	—	[items]: Type:`object` Renders a linked item that points to the beginning of a particular section. Properties: `text` Renders the text for the linked item. Type: `string` `url` Renders the `href` for the linked item. This should be the `id` of the responding section. For example: `#section-one-name`. Type: `string` `active` Indicates that the item represents the current section being viewed. Type: `boolean`
header	Renders a header for the table of contents.	`string`	—	—
uuid	Unique ID for the table of contents, randomly generated if not provided.	`string`	—	—

Install

  npm install @bolt/components-toc

Dependencies

@bolt/components-smooth-scroll

@bolt/core-v3.x

@bolt/lazy-queue

wc-context

Table of Contents

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