Skip to content
Astro Digital Garden

Table of Contents

Starlight

Section titled “Starlight”

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

”Snake” Table of Contents

Section titled “”Snake” Table of Contents”

See:

Implementation

Section titled “Implementation”

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

TODO:

Section titled “TODO:”
  • Fix “snake” styles.

Starlight-Specific Config

Section titled “Starlight-Specific Config”

  1. Create TableOfContents component

    src/components/TableOfContents.astro
    ---
    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",
          },
        }),
      ],
    });