Generate List Based Table Of Contents For Long Document – html-contents

Category: Javascript , Menu & Navigation | September 9, 2020
Author: psalmody
Views Total: 443 views
Official Page: Go to website
Last Update: September 9, 2020
License: MIT


Generate List Based Table Of Contents For Long Document – html-contents


html-contents is a standalone JavaScript library which dynamically generates semantic, SEO-friendly, hierarchical table of contents from heading elements within your long document.

How to use it:

Create a container element to hold the table of content.

<div id="toc">

The library automatically generates anchor links from heading elements, you can customize the anchor names using the ID attribute.

<h2 id="custom-anchor">Heading</h2>

Initialize the html-contents library and we’re done.

document.addEventListener("DOMContentLoaded", function(event) {

Specify the min/max levels of headings.

  // h2
  top: 2,

  // h3 
  bottom: 3

Enable/disable anchor links within the table of contents.

  addIds: true, 
  addLinks: true


Customize the list type. ‘u’ or ‘o’ – (u)nordered or (o)rdered list type.

  listType: 'u'


Ignore specific heading elements.

<h3 class="ignore">Heading</h3>
  filter: '.ignore'



v0.2.0 (2020-09-09)

  • Allow multiple TOC inserts by using querySelectorAll

v0.1.7 (2019-09-17)

  • Pass a string or function to filter option.

v0.1.6 (2019-07-12)

  • better regex for header names, no console.log

You Might Be Interested In:

Leave a Reply