Set Up Multiple Sidebars in Docusaurus: A Complete Guide

As your Docusaurus documentation expands, a single sidebar can quickly become a usability bottleneck. Users struggle to discover relevant content, feel overwhelmed by deep menu hierarchies, and often miss important information buried several layers deep. Setting up multiple sidebars in Docusaurus solves these challenges by creating focused navigation paths tailored to different user needs.

When to Use Multiple Sidebars in Docusaurus

• Easier Navigation: Context-aware menus help users find information faster
• Better Organization: Logical grouping of related documentation
• Improved Scalability: Clean structure that grows with your content
• Reduced Overload: Smaller, focused menus prevent cognitive overload

Prerequisites

Before we begin, make sure you have:

• Node.js v16.14 or later
• A Docusaurus project set up. If not, follow the Create your First Docusaurus Documentation Website guide.
• Basic understanding of how Docusaurus manages documentation.

Organizing Your Documentation Structure

Start by organizing your documentation into logical sections. Here's a recommended structure:

📁 docs/
├── 📁 getting-started/
│   ├── 📄 installation.md
│   ├── 📄 configuration.md
│   └── 📄 first-steps.md
├── 📁 guides/
│   ├── 📄 authentication.md
│   ├── 📄 deployment.md
│   └── 📄 best-practices.md
└── 📁 api/
    ├── 📄 overview.md
    ├── 📄 reference.md
    └── 📁 examples/
        ├── 📄 basic-usage.md
        └── 📄 advanced.md

Set up Multiple Sidebars

Create or modify the sidebars.js file in your project root:

const sidebars = {

  gettingStartedSidebar: [
    {
      type: 'category',
      label: 'Getting Started',
      items: [
        'getting-started/quickstart',
        'getting-started/basictutorial',
      ],
    },
  ],

  writeCodeSidebar: [
    {
      type: 'category',
      label: 'Write Code',
      items: [
        'write-code/bestpractices',
        'write-code/codingessentials',
      ],
    },
  ],

  deploySidebar: [
    {
      type: 'category',
      label: 'Deploy',
      items: [
        'deploy/bestpractices',
        'deploy/setup',
      ],
    },
  ],
  
};

export default sidebars;

Update Docusaurus Configuration

Modify your docusaurus.config.js to use the sidebars:

// docusaurus.config.js

module.exports = {
  // ... other config
  
  themeConfig: {
    navbar: {
      items: [
        // ... other navbar items
         {
            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',
          },
      ],
    },
    // ... rest of themeConfig
  },
  
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // ... other docs options
        },
        // ... other presets
      },
    ],
  ],
};

Test Your Configuration

Start the development server to test your setup:

npm run start

You should now see multiple navigation items in your navbar, each with its own sidebar. With these techniques, you can create a documentation site that's both powerful and easy to navigate, no matter how much content you have.

See also

For a complete working example, check out the Docusaurus Multiple SidebarsL live demo live demo, and the Docusaurus Multiple Sidebars repository on GitHub.

💡 Have questions or run into issues? Open an issue on the Docusaurus Multiple Sidebars repository.