2.21.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

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

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