Table of contents with progress indicator that snaps to active sections

Wow, I can't believe it! I've spent the last few years trying to figure out the best way to handle a table of contents. This is definitely the way to go. I've never seen anything like it. It's perfectly done! 👏

Damn thank you sm Alex! 🥹🫶

Mery this is: 1. dope 2. gonna be all over the web in 2 months

1. Thank you!! 🥹 2. I sure hope I'd love to see it

have a look at the sidebar on fumadocs here's an article of how it was done with svg

These sidebars act differently :) Mine is a progress indicator between sections. The other just highlights the active section. Also, the one from fumadocs is awfully similar to Clerk's doc table of contents...

I'm kinda surprised people still remembers my previous blog posts, yeah it was indeed an additional theme named and inspired by Clerk docs Funny though it's getting more love than the default style, strictly speaking the TOC on mobile is more Fumadocs-ish and aligned with my preferences

@LibyanCossack Great work! 👏

Open source it

TOCs are so rarely well designed! This is nice. Have you also considered adding any tiny indications of read time or locations of images etc?

Thank you! No, haven't thought about that. It depends on the case, but generally I’d keep a TOC easy to scan and avoid adding too much info/UI

Yes, though I suspect with care, it could be done cleanly. What’s your variation for mobile? I might experiment with your indicator sizing ideas. :) Here is one I did recently fwiw:

👌so good, wanted to do something like this in our docs for a while

Thank you! Would love to see one day 🙌

really beautiful!

Love this

Just one question, why you considered content on left and navigation on right, considering conventional eye tracking works left to right .

Bonus: show the subtitles of the active section

that's smooooth! 🧈

Thank youu

put the code in the bag bro

@alex_krasikau Damn, so smooth. Makes me want to steal it haha

I really like this. Good job!

👌🏻🔥

so nice

Thanks!

Very nice! 🙌

Thanks Jason! 🙏

It looks really good 👍🏻

Oooo, that's nice.

Thank you!! 😊

very cool!

Very cool!

ok wow. this will soon be prevalent and known as the mery toc 😇

Code please! This is cool

This is super clean. The snapping feels just right. I'm guessing this is using Intersection Observer to track the active section? It's such a great use case for it. Makes docs and long-form content so much more pleasant to navigate.

Docs need this , great work 👍

Very cool

wow, just revamped my blog, how could i miss this effect :) based work mery!

really cool!

It's this type of detail that really separates one product from another. 🔥🔥🔥

Cool

Seems intuitive. Good job.

Code example? 🙏

this is awesome, keep up the great work!

This is perfect!! I have the sliding indicator on my blog, but have always struggled to get the right thresholds for intersection observer to switch over to the next heading. This definitely helps smoothen the transition.

Cool stuff!