Skip to content
Astro Digital Garden

Table of contents

Starlight

Starlight already has this feature, so no additional work required. But you can override default one ↗

”Snake” table of contents

See:

Implementation

Checkout in the sourcecode how to implement:

TODO:

  • fix bug: it crashes if there are missing header levels, like h4 directly in h2
  • fix “snake” styles

Satrlight specific config

src/components/TableOfContents.astro
---
import type { Props } from "@astrojs/starlight/props";
import TOC from "./TOC.astro";
---


<TOC {...Astro.props} />
astro.config.mjs
export default defineConfig({
  integrations: [
    starlight({
      components: {
        TableOfContents: "./src/components/TableOfContents.astro",
      },
    }),
  ],
});