Floating Table Of Contents In JavaScript – Ootliner

Preview:

Description:

Ootliner is a JavaScript TOC plugin that helps create a dynamic, floating, and hover-triggered table of contents component based on the heading elements you specify.

Perfect for documentation websites and long blog posts to improve the user experience when navigating through various sections and topics.

How to use it:

1. Install and import the Ootliner.

# NPM
$ npm i ootliner

import ootliner from 'ootliner'

<!-- OR -->
<script src="./lib/index.js"></script>

2. Initialize the Ootliner and specify the heading elements you want to use for generating the table of contents. Default: h1 ~h6.

ootliner({
  headings: "h2, h3, h4"
})

3. Set the position of the floating table of contents: left or right.

ootliner({
  headings: "h2, h3, h4",
  position: "left",
})

4. Customize the color of the anchor links.

ootliner({
  headings: "h2, h3, h4",
  position: "left",
  hoverColour: "red", 
  color: "#555",
})