How to Set Up Multiple Sidebars in Docusaurus

When your project has a lot of content, organising it well becomes crucial for helping users find what they need quickly. One great way to do that is by using multiple sidebars. In this guide, I'll show you how to set up multiple sidebars  in Docusaurus.

Multiple Sidebars in Docusaurus

Prerequisites

Before you begin, ensure you have:

• Node.js installed (v12.x or higher).

• Basic understanding of how Docusaurus manages documentation.

• A Docusaurus project set up. If you don’t have a Docusaurus project set up yet, follow the instructions in the Create your First Docusaurus Documentation Website guide.

Set Up Multiple Sidebars in Docusaurus

To set up multiple sidebars, follow these steps:

• Start by organizing your documentation into directories for different sections. For example:

docs/
├── getting-started/
│   ├── quickstart.md
│   ├── basictutorial.md
├── deploy/
│   ├── setup.md
│   ├── bestpractices.md
├── write-code/
│   ├── codingessentials.md
│   ├── bestpractices.md

Each folder represents a section of your documentation. If you already have a structured directory, move to the next step.

• In the root directory of your project, locate the sidebars.js file. Search navbar available under themeConfig, and add the following configuration to define distinct sidebars for each section:

gettingStartedSidebar: [
    {
      type: 'category',
      label: 'Getting Started',
      items: ['getting-started/quickstart', 'getting-started/basictutorial'],
    },
  ],
  writeCodeSidebar: [
    {
      type: 'category',
      label: 'Write Code',
      items: ['write-code/codingessentials', 'write-code/bestpractices'],
    },
  ],
  deploySidebar: [
    {
      type: 'category',
      label: 'Deploy',
      items: ['deploy/setup', 'deploy/bestpractices'],
    },
  ],

• In the docusaurus.config.js file, search for the navbar configuration under themeConfig, and add the following configuration to define distinct sidebars for each section:

{
  type: 'docSidebar',
  sidebarId: 'gettingStartedSidebar',
  position: 'left',
  label: 'Getting Started',
 },
 {
   type: 'docSidebar',
   sidebarId: 'deploySidebar',
   position: 'left',
   label: 'Deploy',
  },
  {
    type: 'docSidebar',
    sidebarId: 'writeCodeSidebar',
    position: 'left',
    label: 'Write Code',
  },

This will create three items on the top bar: Getting Started, Deploy, and Write Code.

If you want your landing page to showcase these sidebars, customize the index.js file located in the pages directory.

Test and Deploy

Follow these steps to test the changes locally and then deploy them to production:

• Run the following command to preview your documentation locally:

npm start

• If you are using GitHub Pages, use the following command to deploy the changes to production, or use your preferred deployment method to publish the changes.

GIT_USER=<Your GitHub Username> USE_SSH=true npm run deploy

Ensure that you replace <Your GitHub Username> with your actual GitHub username.

See also

Before we wrap up, check out the GitHub repository to explore the complete codebase and contribute. You can see the project live by visiting the live demo of setting up multiple sidebars in Docusaurus.

Conclusion

Using multiple sidebars in Docusaurus can help you organize your documentation into logical sections, making it easier for users to navigate and find relevant information. By following this guide, you’ll create a well-structured documentation site that enhances the user experience. You can now apply the learning from how to set up multiple sidebars in Docusaurus to create your own sidebars.

Feedback

We’d love to hear your thoughts! If you have any questions, comments, or suggestions, feel free to leave a comment below or start a discussion on the GitHub repository. Your feedback helps us improve and provide better resources.