📄 Sidebar
Docusaurus can create a sidebar automatically from the filesystem structure: each folder in /docs creates a sidebar category, and each file creates a doc link.
Labels
The sidebar labels in Docusaurus follow a specific resolution hierarchy to ensure consistent navigation. By default, the system prioritizes the Front Matter—specifically the title or sidebar_label properties—with title being the preferred standard for clarity.
If the Front Matter is missing these definitions, Docusaurus automatically falls back to the document's first H1 (#) heading. In the absence of an H1 tag, the system uses the file name itself as a final resort. Adhering to this hierarchy, ideally by explicitly defining the title, ensures that your navigation remains intuitive and unaffected by file naming conventions.
---
title: My page
---
# {frontMatter.title}
This creates a sidebar link labeled "My page" from the
front matter title.
# My Page
This document has no front matter title.
This creates a sidebar link labeled "My page" from the H1 element.
This document has no front matter title or H1 heading.
This creates a sidebar link labeled "my-page" from the files name.
Categories a.k.a folders
When creating a new folder or sub-folder within the /docs directory, always include a README.md file to serve as the folder's index page. This file will define the sidebar folder's label and provides the content displayed when a user clicks on the sidebar folder. Without this index file, the sidebar folder becomes "unlinked"—clicking it will merely expand the sub-menu without navigating to a new page, leaving the previous document visible in the viewport.
---
title: Overview
---
# {frontMatter.title}
This creates a sidebar category labeled "Overview"
from the front matter title.
The README.md file also contains content that talks
about the files within the folder.
Always include the DocCardList component
at the bottom of the README.md file.
import DocCardList from '@theme/DocCardList';
<DocCardList />