Document everything

Hide pages from Docusaurus side bar

Docusaurus is awesome, but it does not come with a built-in option to hide a page on the sidebar. Here's a quick solution using css.

docusaurus
mdx
documentation
1

Context

Docusaurus is a powerful tool for technical documentation. It is a markdown based site generator that makes documenting your Open Source or company project a breeze. It supports MDX that allows the use of React components in markdown, making it more interactive and easy to reuse parts of your documentation.

In the process of creating an award winning documentation, you'll find yourself experimenting a lot with different structures or pages. If you are like me and you don't want to create a specific branch to hide your experimental pages here's a quick solution. What we want:

Pre-requisites

  • Docusaurus v2.4.3
  • A working Docusaurus website
2

Add docusaurus.config.js

EASY~1MIN

Open your /css/custom.css and add the following infos:

.hidden {
  display: none !important;
}
3

Toggle your page visibility docusaurus.config.js

EASY~1MIN

Open the page you don't want to see appear in your sidebar:

---
sidebar_position: 2
sidebar_class_name: hidden #<- add this if you want to hide this page.
---
...

Voilà!

PS: The page is still accessible, it is simply hidden from the side bar.

Update: Docusaurus v3

Docusaurus v3 offers an 'Unlisted' option to remove pages from production build: https://docusaurus.io/blog/releases/3.0