Auto-Generate Table of Contents Using Tocbot

Lengthier calm is apropos a normal with a stronger accepting from Google and as good as a users. But it can get a bit overpowering to review a long-form content with tons of sub-headings to browse.

Enter Tocbot, a giveaway table of essence generator built on JavaScript. This automatically creates a bound ToC list on any page and updates your position as we corkscrew past any heading.

tocbot homepagetocbot homepage

The main page includes a full preview along with support we can follow to get this all setup.

Tocbot has no dependencies and should run in any browser with JavaScript enabled. You only embody a Tocbot JS/CSS files and let ’em run. Simple!

You can even use a CDN versions if we don’t wish to download anything locally. It’s a flattering simple setup and we can even customize a list of contents to fit your needs.

However this does need a bit of JavaScript to get it working. Specifically we need to run an init() duty with parameters definING where your navigation should seem and that heading(s) we wish to target(ie. H1-H6).

Take a demeanour during a GitHub repo for some-more setup info. This includes browser support, all tradition parameters, and a setup instructions for a categorical JS/CSS files.

The API comes with a lot of facilities we can revise too:

  • Collapsible list of items.
  • Sub-headings in table.
  • Offset for list navigation.
  • Fixed nav or static.
  • Extra links to supplement into a navigation.

Some designers might cite to emanate their possess list of essence from scratch. But that is a sincerely technical routine and requires copiousness of primer effort.

With Tocbot you’re only one JS duty divided from a operative ToC that runs boldly opposite all your page headings.

To learn some-more revisit a Tocbot homepage. This has all a setup info we need along with download links to a CDN(and local) versions of all a Tocbot files.

tocbot instance pagetocbot instance page

Add Comment