Table of Contents

I’ve tried multiple tutorials to create an automated table of contents. Astro already has the tools that you need for this. But, there were many approaches out there. None of which worked for me.

So, I created a table of contents component that I manually updated. That meant creating the anchor links in my content too. This took a lot of time and was a pain. I kept searching looking for something that would make this work for me.

I will still do some Google searches to find new Astro tutorials. There are things that I wish to put in place but don’t know how to do. A lot of what is out there is also written for professional devs. I don’t always understand them well enough to use them. Fortunately, I stumbled on the best implementation of an automated table of contents.

Create Table of contents in Astro and sectionize the Markdown content by Reza Zahedi

Zahedi makes it easy to understand how to build a table of contents component. I had no trouble working with the code or customizing it. It is the most straightforward that I’ve found. It doesn’t need to install any dependencies. It works with the functions already built into Astro.

As a bonus, they also share how to create JavaScript for an observer. You can style the link in your table of contents when you scroll to a section divided by a header. This is a neat effect and helps people track their place in your articles. You can see it in practice in this tutorial from Kevin Drum. This is another way that you can automate creating a table of contents.

Check out this component if you’ve updated to Astro 5.0 and your table of contents has stopped working. Astro Table Of Contents Component + Sample Usage by Maciej Pędzich