How can I reuse the sidebar navigation in a place that isn't the sidebar?

[oliwarner]

What I want: A contents listing on my home page, following the same structure as the sidebar, formatted a very different way.

I could do this with the Sidebar/SidebarSublist and some corrective CSS. But I can't get them to render directly. I assume the MDX doesn't have the same environment, and it's not being passed through (I'm not sure how I'd do that from MDX).

So any ideas? I tried making a /pages/index.astro to get a slightly lower-level evironment but this lacks all the Starlight props (unless there's a way to get that information out of the StarlightPage component) and importing deeper .ts files just made astro pop with "Missing specifier ... in ... package" errors.

I don't want to do this manually and have to update it and the sidebar every time there's a change.

[HiDeoo]

👋 Thanks for your question.

This is something that can be achieved using component overrides which allow you to replace the components used by Starlight with your own custom components. When overriding a Starlight component, your custom component receives a standard object (Astro.props) containing all the data for the current page (which includes the sidebar data)

In your specific case, one solution could be to override the <MarkdownContent/> component which is rendered around each page’s main content. If the page is the hompage, render something totally diferent that is re-using the sidebar data. If this is not, render the default MarkdownContent component from Starlight.

I tried to give links to the relevant parts of the documentation for each steps but here is also a small StackBlitz example that demonstrates how to achieve this. This would require some more work based on your specific needs, your sidebar structure and how you want to render it but this should give you a good starting point.

[oliwarner]

This is extraordinarily helpful. Thank you.

With this I've managed to pull the straight SidebarSublist onto the CustomHomepage.

---
import type { Props } from '@astrojs/starlight/props';
import SidebarSublist from '@astrojs/starlight/components/SidebarSublist.astro'
---
<SidebarSublist sublist={Astro.props.sidebar} />
<slot />

Though it's a bit of a shame this can only come about by hotwiring another component.

[delucis]

Without promising too much, as this would be a way off in the future, but it may be possible for us to eventually move the object currently available to component overrides as Astro.props to Astro.locals, which would be available to any component, not just overrides. That would simplify things like this, because a component could use something like Astro.locals.page.sidebar and be dropped into the homepage without the need for overrides. Something for us to think about!