Skip to content
🗄️ Starlight Multi-Sidebar

Getting Started

There are cases where having multiple sidebars for a Starlight site can be useful. Starlight does not currently support this natively, but this Starlight plugin gives a minimal implementation of this.

Setup Instructions

  1. Setup a Starlight Site: https://starlight.astro.build/getting-started/

  2. Install the starlight-multi-sidebar plugin:

    Terminal window
    npm i @lorenzo_lewis/starlight-multi-sidebar

  3. Update the integrations.starlight.plugins object in astro.config.mjs to include the starlight-multi-sidebar plugin:

    astro.config.mjs
    import { defineConfig } from "astro/config";
    import starlight from "@astrojs/starlight";
    import starlightMultiSidebar from "@lorenzo_lewis/starlight-multi-sidebar";
    

    // https://astro.build/config
    export default defineConfig({
      integrations: [
        starlight({
          plugins: [starlightMultiSidebar()],
        }),
      ],
    });

  4. All top-level items in integrations.starlight.sidebar are turned into their own sidebar. Configure each desired sidebar:

    astro.config.mjs
    import { defineConfig } from "astro/config";
    import starlight from "@astrojs/starlight";
    import starlightMultiSidebar from "@lorenzo_lewis/starlight-multi-sidebar";
    

    // https://astro.build/config
    export default defineConfig({
      integrations: [
        starlight({
          plugins: [starlightMultiSidebar],
          sidebar: [
            {
              label: "Guides",
              autogenerate: { directory: "reference" },
            },
            {
              label: "Reference",
              autogenerate: { directory: "reference" },
            },
          ],
        }),
      ],
    });

  5. All done! ✨