2.23.0

Table of Contents

Table of Contents is a navigation list, usually found on an article page, of its section titles.

Published

History
View changes
Install
yarn add @bolt/components-toc
Source code
View on Github
Dependencies
@bolt/components-smooth-scroll @bolt/core-v3.x @bolt/lazy-queue wc-context

Overview

Table of Contents is part of the collection of components, visual styles, and build tools that power the the Bolt Design System.

Install via NPM
npm install @bolt/components-toc
Overview Usage Schema Edit this page

Usage

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

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

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 —
  • —
Debug Panel