Hide Overview heading in page-level TOC?

[melissahenderson]

Hello! Is there a native way to hide the the Overview heading from a page's TOC? I'm creating a glossary page for one of our doc sets and would like the TOC to start with "A". I tried setting the page's minHeadingLevel to 3, but that didn't help.

[HiDeoo]

Thanks for the question!

There isn't a built-in way to hide the Overview heading from the TOC. However, this is something you can achieve using component overrides which is a feature that let you replace the default components used by Starlight with your own custom components.

The idea would work like this:

• Add a component override for the PageSidebar component which is responsible for rendering the table of contents.
• In the custom PageSidebar component, re-use the built-in PageSidebar component so that you don't have to re-implement the entire table of contents.
• Only when on the glossary page, filter out the Overview heading from the table of contents.

Such a component override would look something like this:

---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/PageSidebar.astro';

// Check if we are on the glossary page.
const isGlossary = Astro.props.slug === 'glossary';

const toc = isGlossary
	? {
			...Astro.props.toc,
			// If we are on the glossary page, remove the first toc entry which is the overview link.
			items: Astro.props.toc.items.slice(1),
	  }
	: Astro.props.toc;
---

<!-- Render the default component with the potentially modified toc. -->
<Default {...Astro.props} {toc}><slot /></Default>

To help getting started, here is a StackBlitz example that demonstrates the entire process.

If you have any questions or need further assistance, feel free to ask or reach out to us on the Astro Discord.

[melissahenderson]

@huijing I think this is a good candidate for our internal component library.