how to make large section selectors in docs

[uncut oak]

how do I make a large section selector in Starlight like in the astro docs? https://docs.astro.build/en/guides/deploy/github/ on the left with Start, Guides and recipes, Reference, Integrations

[green karma]

Hi @uncut oak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To create large section selectors in your Starlight documentation sidebar—similar to the prominent section groupings in the Astro docs (e.g., “Start”, “Guides and recipes”, “Reference”, “Integrations”)—you should use sidebar groups. Starlight allows you to organize your sidebar into labeled, collapsible groups, each containing related links or even nested subgroups.

Here’s how you can define large section selectors (groups) in your astro.config.mjs using the sidebar property:

starlight({
  sidebar: [
    {
      label: 'Start',
      items: [
        'getting-started/introduction',
        'getting-started/installation',
      ],
    },
    {
      label: 'Guides and recipes',
      items: [
        'guides/first-steps',
        'guides/advanced-topics',
      ],
    },
    {
      label: 'Reference',
      items: [
        'reference/configuration',
        'reference/api',
      ],
    },
    {
      label: 'Integrations',
      items: [
        'integrations/react',
        'integrations/vue',
      ],
    },
  ],
});

• Each object with a label and items property creates a visually distinct section in the sidebar.
• You can nest groups for further organization.
• The sidebar will display these as large, clear section selectors, just like in the Astro docs.

For more details and examples, see the Groups section in the Starlight sidebar guide and the Sidebar Navigation guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@uncut oak Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[uncut oak]

@green karma how do I emulate the visual style of the astro docs Start sidebar?

[green karma]

Let me check the knowledge base for you again. One moment! :books:

---

To emulate the visual style of the Astro docs’ “Start” sidebar section in Starlight, you should use sidebar groups with the label and items properties in your Starlight configuration. This creates prominent, labeled sections in your sidebar, just like the “Start” section in the Astro docs.

Here’s an example configuration:

starlight({
  sidebar: [
    {
      label: 'Start',
      items: [
        'getting-started/introduction',
        'getting-started/installation',
      ],
    },
    // Add more groups as needed
  ],
});

This will create a sidebar section labeled “Start” with your chosen links underneath. Starlight’s default styling will render these groups with clear headings, similar to the Astro docs. If you want to further customize the appearance (such as font size, spacing, or colors), you can add custom CSS to your project and target the sidebar group headings using CSS selectors. Add your custom CSS file via the customCss option in your Starlight config Custom CSS styles.

For more on sidebar groups, see the Groups section of the Starlight sidebar guide. For custom styling, refer to the CSS & Styling guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@uncut oak Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[uncut oak]

@green karma how do I change the sidebar based on a selection like the astro docs?

[green karma]

Let me check the knowledge base for you again. One moment! :books:

---

I'm sorry, but the knowledge sources do not contain explicit information about dynamically changing the sidebar based on a user selection (such as switching between major sections, like in the Astro docs) in Starlight.

Starlight supports organizing your sidebar into groups and subgroups using the sidebar configuration, and you can customize the sidebar for individual pages or provide a custom sidebar to a page using the <StarlightPage /> component’s sidebar prop. However, there is no documented built-in feature for switching the entire sidebar content based on a user selection or context, as seen in the Astro docs.

If you need this advanced behavior, you may want to explore community plugins such as starlight-sidebar-topics or starlight-sidebar-topics-dropdown, which are designed to split your documentation into different sections, each with its own sidebar, or allow switching between them with a dropdown menu. These plugins are listed in the Starlight community plugins, but detailed usage instructions are not included in the provided knowledge sources.

For standard sidebar customization, see the sidebar configuration reference and sidebar groups guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@uncut oak Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[uncut oak]

thank you! those plugins is exactly what I wanted!

[uncut oak]

@green karma does starlight-sidebar-topics play nice with autogenerate for topics?

[green karma]

Let me check the knowledge base for you again. One moment! :books:

---

I'm sorry, but the knowledge sources do not contain enough information to confirm whether the starlight-sidebar-topics plugin works seamlessly with the autogenerate feature for topics. The documentation lists the plugin as a community resource but does not provide details about its compatibility or usage with autogenerate sidebar groups Community plugins.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: