Skip to content
Astro Digital Garden

Table of Contents

Starlight

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

”Snake” Table of Contents

See:

Implementation

Check out the source code to see how to implement it:

TODO:

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

Starlight-Specific Config

  1. Create TableOfContents component

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

    <TOC {...Astro.props} />

  2. Configure Astro

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