Bootstrap 4 Dynamic Table of Contents with jQuery

A multi feature jQuery plugin for Bootstrap 4 to generate table of contents dynamically. The plugin get headings from article and make a beautiful content menu in sidebar. When user clicks a specific heading from TOC then content page smoothly scroll to that heading’s section.

Moreover, you can fully customize content menu with its available options & with additional CSS according to your needs.

Plugin Overview

Plugin: jquery-dynamic-content-menu
Author: Sergio
Licence: MIT Licence
Published: July 26, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 14.5 KB

How to Use Bootstrap Table of Contents

1.Load the Bootstrap and jQuery in your HTML document to getting started with dynamic table of contents.

<!-- jQuery -->
<script src=""></script>

<!-- Bootstrap CSS -->
<link href="">

<!-- Bootstrap JS -->
<script src=""></script>

2. Also include plugin’s assets that will generate table of contents.

<!-- Dynamic TOC Assets -->
<link rel="stylesheet" href="css/jquery-dynamic-content-menu.css">
<script src="js/jquery-dynamic-content-menu.js"></script>

3. After that, create some paragraph with headings.

<h1> First heading </h1>
<p> Some contents...</p>
<h2> Second heading </h2>
<p> Some contents...</p>
<h2> Third heading </h2>
<p> Some contents...</p>

4. Create a div element with a unique id in which TOC will be generated.

<!-- Side -->
<div class="col-md-4">
    <!-- Plugin menu in this place -->
    <div id="dinamicMenu"></div>

5. Finally, initialize the plugin in jQuery document ready function to active bootstrap 4 table of contents.


                    'selectors' : "h1, h2",


Advance Configuration Options for Bootstrap Table of Contents

The following are some advance configuration options to create / customize “dynamic table of contents”.

Option Description, Default, Type

Define the theme for TOC. Default: “material”, Type: String.
Available Options: “bootstrap”, “jqueryui”, or “none”.

   theme:  "material",

This option selects headings to be shown in TOC. Defaullt: “h1, h2, h3”, Type: String | Object.

   selectors: "h1, h2, h3",

Decide weather to extend page or not. Default: true, Type: Boolean.

   extendPage: false,

Decide weather to scroll smoothly to sections or not. Default: true, Type: Boolean.

    smoothScroll: false,

Adds a hash to the page url, to maintain history, when scrolling to a DynamicContentMenu item. Default: false, Type: Boolean.

   scrollHistory: true,

Define the scrolling speed. Default: “medium”, Type: String.
Available Options: “slow”, “medium”, or “fast”.

   smoothScrollSpeed: "medium",

CSS animation for hiding sub headings on scroll. Default: “slideUp”, Type: String.
Available Options: “none”, “fadeOut”, “hide”, or “slideUp”.

   hideEffect: "slideUp",

Be the first to comment

Leave a Reply

Your email address will not be published.


4 × three =

This site uses Akismet to reduce spam. Learn how your comment data is processed.