# Dynamic TOC highlighting

**URL:** <https://discourse.gohugo.io/t/dynamic-toc-highlighting/10299>\
**Category:** Uncategorized\
**Created:** [February 1, 2018, 2:11pm UTC](https://discourse.gohugo.io/t/dynamic-toc-highlighting/10299 "2018-02-01T14:11:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joerg](https://avatars.discourse-cdn.com/v4/letter/j/49beb7/32.png) [@Joerg](https://discourse.gohugo.io/u/Joerg)\
**Post date:** [February 1, 2018, 2:11pm UTC](https://discourse.gohugo.io/t/dynamic-toc-highlighting/10299/1 "2018-02-01T14:11:42Z")

</div>

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/](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?

 ![mkdoc-material](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/a/a114c6abb99e8b6bfac94f83fe471242b086eff9.png)

![material-doc](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/f/f726206dae71ce80275d37bf3135ef29f0deca4d.png)

---

<div class="post-metadata">

**Author:** ![Mikhail](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikhail/32/1138_2.png) [@Mikhail](https://discourse.gohugo.io/u/Mikhail)\
**Post date:** [February 1, 2018, 2:36pm UTC](https://discourse.gohugo.io/t/dynamic-toc-highlighting/10299/2 "2018-02-01T14:36:28Z")

</div>

> **[Hugo themes with dynamic TOC highlighting](https://discourse.gohugo.io/t/hugo-themes-with-dynamic-toc-highlighting/10281/3)**
>
> @huyingjie wrote: @anthonyfok Thank you. Academic theme does not have table of contents sidebar https://themes.gohugo.io/theme/academic/post/getting-started/ The default Academic theme doesn’t, but its documentation does! And it turns out it is...

---

<div class="post-metadata">

**Author:** ![anthonyfok](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/anthonyfok/32/106_2.png) [@anthonyfok](https://discourse.gohugo.io/u/anthonyfok)\
**Post date:** [February 2, 2018, 10:42pm UTC](https://discourse.gohugo.io/t/dynamic-toc-highlighting/10299/3 "2018-02-02T22:42:09Z")

</div>

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:](https://discourse.gohugo.io/t/hugo-themes-with-dynamic-toc-highlighting/10281:)

- [Academic](https://themes.gohugo.io/academic/) uses Bootstrap v3.3.7 with Bootstrap’s scrollspy.js;
- [Material Docs](https://themes.gohugo.io/theme/material-docs/), which @digitalcraftsman adapted from [https://github.com/squidfunk/mkdocs-material](https://github.com/squidfunk/mkdocs-material), appears to be written from the ground up, i.e. it is not using any existing framework like Bootstrap.

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](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:

- [Understanding Bootstrap’s Affix and ScrollSpy plugins — SitePoint](https://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins/)

- [Not Scrollspy and Not Affix](http://mentaldrizzle.tumblr.com/post/55609456179/not-scrollspy-and-not-affix)

- [jquery - how to use scrollspy without using bootstrap - Stack Overflow](https://stackoverflow.com/questions/30348314/how-to-use-scrollspy-without-using-bootstrap)

- [r3plica/Scrollspy](https://github.com/r3plica/Scrollspy)

- [Scrollspy example](https://codepen.io/r3plica/pen/NqbarV)

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. 🙂

Cheers,  
Anthony

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [March 12, 2018, 7:09pm UTC](https://discourse.gohugo.io/t/dynamic-toc-highlighting/10299/4 "2018-03-12T19:09:22Z")

</div>

I recently came across this JS library [`tocbot`](https://github.com/tscanlin/tocbot)… looks [nice](https://tscanlin.github.io/tocbot), and [configurable](https://tscanlin.github.io/tocbot/#api).