How to Set Up Multiple Sidebars in Docusaurus

If your Docusaurus docs feel like an endless scroll, your users are probably lost too. When documentation grows, one massive sidebar turns into a maze.

Using multiple sidebars solves this by:

• Better navigation – Users find what they need faster.

• Scaling with content – Easy to maintain as docs grow.

• Improving UX – Reduces overwhelm and drop-offs.
  

This guide walks you through how to set up multiple sidebars in Docusaurus step-by-step — from folder structure to deployment — so your users always know where they are.

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 not, follow the Create your First Docusaurus Documentation Website guide.

Set Up Multiple Sidebars in Docusaurus

To set up multiple sidebars, follow these steps: 1. Organise your documentation: Start by creating a folder for each major section of your docs in the docs/ directory:

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

Each folder represents a self-contained section of your documentation.

2. Define multiple sidebars: Open the sidebars.js file in the root of your project and create separate 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'],
    },
  ],

3. Link sidebars to the navbar: In docusaurus.config.js, locate the themeConfig.navbar section and add each sidebar as a separate navbar item:

{
  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 creates three clear navigation items at the top of your site: Getting Started, Deploy, and Write Code.

If you want your homepage to showcase these sections, open pages/index.js and add links to each section.

Test and Deploy

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

• Run the local server to preview your changes:

npm start

• When ready, deploy your site. For GitHub Pages:

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

• Replace <Your GitHub Username> with your actual username.

• Or use your preferred deployment method.

See also

• Explore the complete codebase and contribute on GitHub: View the repository

• Check out the live demo of multiple sidebars in Docusaurus.

Conclusion

By following these steps on how to set up multiple sidebars in Docusaurus, you’ll turn a long, cluttered sidebar into a clear navigation system that scales with your project.

💬 Have you tried this approach? Share your experience or tips in the comments.