Tocbot-style functionality for .TableOfContents

support
1

Tocbot is a JavaScript library that I’ve used on several projects to produce a really nice table of contents with scrollspy and other potential features. The downside, of course, is that Tocbot generates the table of contents at page load time, whereas in Hugoworld we always prefer to do as much as humanly possible at build time.

Have any of you managed to get Tocbot-style functionality just using .TableOfContents, CSS, and JavaScript? I would definitely love to remove Tocbot from my stack if at all possible.

I have some ideas for how to make this happen but it never hurts to ask this great community first!

2

From what I’ve seen in the provided link that library basically expands the TOC headings and makes them bold on click while there is a smooth scroll in between each heading.

I think that you can do the above (or most of it) in Hugo’s static TOC with a combination of CSS properties like :target or sticky and scroll-behavior

1 Like