Bolt Design System

Twig Usage

{% set toc_items %}
  {% include '@bolt-components-toc/toc-item.twig' with {
    text: 'Section One',
    url: '#section-one',
  } only %}
  {% include '@bolt-components-toc/toc-item.twig' with {
    text: 'Section Two',
    url: '#section-two',
  } only %}
  {% include '@bolt-components-toc/toc-item.twig' with {
    text: 'Section Three',
    url: '#section-three',
  } only %}
{% endset %}
{% include '@bolt-components-toc/toc.twig' with {
  header: 'This is the header',
  content: toc_items
} only %}

Schema

Toc (toc.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-toc> tag.	`object`	—	—
header	Renders a header for the table of contents. If not specified, the default value will be used and the header will be visually hidden but accessible to screen readers.	`string`	`Table of Contents`	—
sticky	When enabled, TOC will automatically use sticky positioning + add a `top` offset style based on the height of the header and/or any other sticky elements + the `scroll_offset` height (if defined),	`boolean`	—	—
variant	Set the visual variant.	`string`	`card`	`transparent` or `card`
scroll_offset	Additional offset for smooth scrolling, an integer converted to pixel value.	`integer`	—	—
content	Generates toc items. Accepts @bolt-components-toc-item	`object`	—	—

Toc item (toc-item.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-toc> tag.	`object`	—	—
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

Toc

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