#How can I correctly customize the slug of the pages in Starlight without affecting the sidebar?
3 messages · Page 1 of 1 (latest)
Hi @compact rock. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Starlight, the slug property in the frontmatter of a page allows you to override the slug of the page. However, when using the <StarlightPage /> component, the slug property is not supported and is automatically set based on the custom page’s URL. This means that if you're using this component and you set a custom slug, it won't affect the sidebar because pages using the <StarlightPage /> component are not part of a collection and cannot be added to an autogenerated sidebar group.
If you want to customize the appearance of a link in the sidebar, you can use the sidebar frontmatter field in individual pages. This allows you to set a custom label or add a badge to a link, hide a link from the sidebar, or define a custom sort weighting. However, this configuration is only used for autogenerated links and will be ignored for manually defined links.
Here's an example of how you can use the sidebar frontmatter field to customize a link:
---
title: My page
sidebar:
label: Custom sidebar label
order: 2
badge:
text: New
variant: tip
---
In this example, the link to "My page" in the sidebar will be displayed as "Custom sidebar label" with a "New" badge, and it will be the second link in the sidebar.
For more information, you can refer to the following guides:
- Frontmatter Reference (https://starlight.astro.build/reference/frontmatter/#_top)
- Customizing autogenerated links in frontmatter (https://starlight.astro.build/guides/sidebar/#customizing-autogenerated-links-in-frontmatter)
- Using Starlight’s design in custom pages > Props (https://starlight.astro.build/guides/pages/#props)