2.23.0

Table of Contents

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

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
  {% include "@bolt-components-toc/toc.twig" with {
  items: [
    {
      text: "Section 1",
      url: "#section-1"
    },
    {
      text: "Section 2",
      url: "#section-2"
    },
  ]
} only %}

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