Auto-Generate Table of Contents Using Tocbot
Lengthier content is becoming the norm with a stronger reception from Google and as well as the users. But it can get a bit tiring to read the long-form content with tons of sub-headings to browse.
Enter Tocbot, a free table of contents generator built on JavaScript. This automatically creates a fixed ToC list on any page and updates your position as you scroll past each heading.
Read Also: Create Auto-generated Table of Contents with HTML Slots
The main page includes a full preview along with documentation you can follow to get this all setup.
Tocbot has no dependencies and should run in any browser with JavaScript enabled. You just include the Tocbot JS/CSS files and let ’em run. Simple!
You can even use the CDN versions if you don’t want to download anything locally. It’s a pretty simple setup and you can even customize the table of contents to suit your needs.
However this does require a bit of JavaScript to get it working. Specifically you need to run an init() function with parameters definING where your navigation should appear and which heading(s) you want to target(ie. H1-H6).
Take a look at the GitHub repo for more setup info. This includes browser support, all custom parameters, and the setup instructions for the main JS/CSS files.
The API comes with a lot of features you can edit too:
- Collapsible list of items.
- Sub-headings in table.
- Offset for table navigation.
- Fixed nav or static.
- Extra links to add into the navigation.
Some designers may prefer to create their own table of contents from scratch. But that is a fairly technical process and requires plenty of manual effort.
With Tocbot you’re just one JS function away from a working ToC that runs dynamically across all your page headings.
To learn more visit the Tocbot homepage. This has all the setup info you need along with download links to the CDN(and local) versions of all the Tocbot files.
