Dynamic TOC highlighting

I would like to have a dynamics directory for my handbook on the right sidebar. I have found some themes where they have already been implemented. https://themes.gohugo.io/theme/material-docs/adding-content/
Unfortunately, I do not know how to install the dynamic table of contents. The documentation is not revealing. My question is: how do I implement such a table of contents?

material-doc

1 Like

Hi @Joerg,

About the two Hugo themes that have dynamic TOC highlighting functionality as I wrote in https://discourse.gohugo.io/t/hugo-themes-with-dynamic-toc-highlighting/10281:

Note that with Bootstrap’s scrollspy.js, you will need a corresponding .css file to make it work. See https://github.com/anthonyfok/academic-kickstart-toc-example/blob/master/static/css/custom.css especially the lines containing data-toggle="toc".

Note: I am not a theme developer, and have little experience with actually implementing dynamic TOC highlighting.

From what you have told me in a private message, you have apparently implemented your own theme on your website from the ground up too. I am not sure if you want to pull in Bootstrap at all. Anyhow, here are some random links that I found which might be helpful to you:

And, if @digitalcraftsman has time, he would be the better person to ask because he ported Material Docs theme and changed the scrollspy functionality afterall. :slight_smile:

Cheers,
Anthony

1 Like

I recently came across this JS library tocbot… looks nice, and configurable.

1 Like