I was wondering if there was a way of changing the table of contents behaviour and maybe even control the ids it outputs as links. I wanted to make something like this https://lab.hakim.se/progress-nav/ Thanks in advance
I don’t think you can change that. But… have a look at Bootstraps Scrollspy.
It basically works without changing anything because the TOC should create locally anchored links. I am pretty sure that hakim.se’s solution can be adapted too, but the whole “requires pro” at many points did blind me to check deeper 
Try a free solution.
The whole snake-border-thing in the sample nav is done by CSS that borders the current :active nav link item and is animated between :active's.
1 Like
@bep
it would be nice to get a render-toc.html to tune the own table of content.
The current TOC has nav elements, it can not used inside of the navigation (in my grid layout).
2 Likes
Thanks for the suggestion. I was looking forward to not using bootstrap because I have found it to be a little bit demanding on the website. If you have any idea on how to do it, I’d love to hear that 
Have fun not using Bootstrap. I am sure there are other systems around that do scrollspy-like features. This is still not a feature for Hugo but for the underlying Javascript/CSS system.
Hi, the solution proposed in this thread is something similar: Create a custom page TOC ("mini TOC") with Javascript
(There was also another thread with a similar approach that uses the hugo toc instead of rebuilding it in javascript, but I can’t find it right now).