Sidebar Navigation
A well-organized sidebar is key to a good documentation as it is one of the main ways users will navigate your site. Starlight provides a complete set of options to customize your sidebar layout and content.
Default sidebar
By default, Starlight will automatically generate a sidebar based on the filesystem structure of your documentation, using each file’s title
property as the sidebar entry.
For example, given the following file structure:
Directorysrc/
Directorycontent/
Directorydocs/
Directoryconstellations/
- andromeda.md
- orion.md
Directorystars/
- betelgeuse.md
The following sidebar will be automatically generated:
Learn more about autogenerated sidebars in the autogenerated groups section.
Add links and link groups
To configure your sidebar links and groups of links (within a collapsible header), use the starlight.sidebar
property in astro.config.mjs
.
By combining links and groups, you can create a wide variety of sidebar layouts.
Internal links
Add a link to a page in src/content/docs/
using an object with the slug
property.
The linked page’s title will be used as the label by default.
For example, with the following configuration:
And the following file structure:
Directorysrc/
Directorycontent/
Directorydocs/
Directoryconstellations/
- andromeda.md
- orion.md
The following sidebar will be generated:
To override the values inferred from a linked page’s frontmatter, you can add label
, translations
, and attrs
properties.
See “Customizing autogenerated links” for more details about controlling the sidebar appearance from page frontmatter.
Shorthand for internal links
Internal links can also be specified by providing only a string for the page slug as a shorthand.
For example, the following configuration is equivalent to the configuration above, which used slug
:
Other links
Add a link to an external or non-docs page using an object with label
and link
properties.
The configuration above generates the following sidebar:
Groups
You can add structure to your sidebar by grouping related links together under a collapsible heading. Groups can contain both links and other sub-groups.
Add a group using an object with label
and items
properties.
The label
will be used as the heading for the group.
Add links or subgroups to the items
array.
The configuration above generates the following sidebar:
Autogenerated groups
Starlight can automatically generate a group in your sidebar based on a directory of your docs. This is helpful when you do not want to manually enter each sidebar item in a group.
By default, pages are sorted in alphabetical order according to the file slug
.
Add an autogenerated group using an object with label
and autogenerate
properties. Your autogenerate
configuration must specify the directory
to use for sidebar entries. For example, with the following configuration:
And the following file structure:
Directorysrc/
Directorycontent/
Directorydocs/
Directoryconstellations/
- carina.md
- centaurus.md
Directoryseasonal/
- andromeda.md
The following sidebar will be generated:
Customizing autogenerated links in frontmatter
Use the sidebar
frontmatter field in individual pages to customize autogenerated links.
Sidebar frontmatter options allow 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.
An autogenerated group including a page with the frontmatter above will generate the following sidebar:
Badges
Links, groups, and autogenerated groups can also include a badge
property to display a badge next to their label.
The configuration above generates the following sidebar:
Badge variants and custom styling
Customize the badge styling using an object with text
, variant
, and class
properties.
The text
represents the content to display (e.g. “New”).
By default, the badge will use the accent color of your site. To use a built-in badge style, set the variant
property to one of the following values: note
, tip
, danger
, caution
or success
.
Optionally, you can create a custom badge style by setting the class
property to a CSS class name.
The configuration above generates the following sidebar:
Custom HTML attributes
Links can also include an attrs
property to add custom HTML attributes to the link element.
In the following example, attrs
is used to add a target="_blank"
attribute, so that the link opens in a new tab, and to apply a custom style
attribute to italicize the link label:
The configuration above generates the following sidebar:
Internationalization
Use the translations
property on link and group entries to translate the link or group label for each supported language by specifying a BCP-47 language tag, e.g. "en"
, "ar"
, or "zh-CN"
, as the key and the translated label as the value.
The label
property will be used for the default locale and for languages without a translation.
Browsing the documentation in Brazilian Portuguese will generate the following sidebar:
Internationalization with internal links
Internal links will automatically use translated page titles from content frontmatter by default:
Browsing the documentation in Brazilian Portuguese will generate the following sidebar:
In multilingual sites, the value of slug
does not include the language portion of the URL.
For example, if you have pages at en/intro
and pt-br/intro
, the slug is intro
when configuring the sidebar.
Internationalization with badges
For badges, the text
property can be a string, or for multilingual sites, an object with values for each different locale.
When using the object form, the keys must be BCP-47 tags (e.g. en
, ar
, or zh-CN
):
Browsing the documentation in Brazilian Portuguese will generate the following sidebar:
Collapsing groups
Groups of links can be collapsed by default by setting the collapsed
property to true
.
The configuration above generates the following sidebar:
Autogenerated groups respect the collapsed
value of their parent group:
The configuration above generates the following sidebar:
This behavior can be overridden by defining the autogenerate.collapsed
property.
The configuration above generates the following sidebar: