Table of Contents Web Component

…and another one.

This little (zero CSS) web component has two modes: progressively enhance a hierarchy of server rendered <ol> or <ul> elements (or conveniently client render them for you if they don’t exist) to highlight which are currently visible in the viewport.

I pulled this code out of the table-of-contents.webc component from the WebC Tugboat starter project for standalone use.

• Demo
  • And a demo in the sidebar of this blog post on my website.
  • And a server rendered demo on Blog Awesome, e.g. Font Awesome 7.3 Is Here!
• Source code
• @zachleat/table-of-contents on npm

You can configure a selector attribute to control the scope of the headings search. My site uses main :is(h2, h3) but the default is main :is(h2, h3, h4, h5, h6).

Again, all styles for this component are application styles. There is no component CSS on this one.

Installation

npm install @zachleat/table-of-contents

Some sample headings