> Markdown version of [https://nikhilajain.com/blog/posts/how-to-set-up-multiple-sidebars-in-docusaurus/](https://nikhilajain.com/blog/posts/how-to-set-up-multiple-sidebars-in-docusaurus/).

Documentation Systems

January 18, 2025

3 min read

# Docusaurus Multiple Sidebars: Complete Setup Guide with Code Examples

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](/blog/posts/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:

```markdown
📁 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:

```javascript
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:

```javascript
// 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:

```bash
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, visit the [Docusaurus Multiple Sidebars live demo](https://jnikhila.github.io/docusaurus-multiple-sidebars/) or explore the [repository on GitHub](https://github.com/jnikhila/docusaurus-multiple-sidebars).

> 💡 Have questions or run into issues? Open an issue on the [Docusaurus Multiple Sidebars repository](https://github.com/jnikhila/docusaurus-multiple-sidebars).

### Need help with your documentation system?

I specialize in docs-as-code migrations, AI-native documentation architectures (RAG-ready), and developer portal design. Let's build a modern, high-impact docs pipeline together.

[Start a docs experiment](/contact/)

[Connect on LinkedIn](https://www.linkedin.com/in/nikhila-jain)