Bolt Design System

Web Component Usage

Bolt Table of Contents is a web component, you can simply use <bolt-toc> in the markup to make it render.

Section One

Section Two

Section Three

<bolt-toc> <bolt-toc-item url="#section-one"> Section One </bolt-toc-item> <bolt-toc-item url="#section-two"> Section Two </bolt-toc-item> <bolt-toc-item url="#section-three"> Section Three </bolt-toc-item> </bolt-toc>

Basic Usage

All the props defined in the schema table can be used directly on the <bolt-toc> element and the <bolt-toc-item> element.

Phase One

Phase Two

Phase Three

<bolt-toc header="Marvel Cinematic Universe"> <bolt-toc-item url="#phase-one"> Phase One </bolt-toc-item> <bolt-toc-item url="#phase-two" active> Phase Two </bolt-toc-item> <bolt-toc-item url="#phase-three"> Phase Three </bolt-toc-item> </bolt-toc>