Multiple Sidebar Configuration

This document outlines the standard pattern for adding new sections to the main navigation with separate sidebar content.

Overview

Our Docusaurus site uses multiple sidebars to organize different content sections. Each main navigation item can have its own dedicated sidebar that only displays content from its specific directory.

Implementation Pattern

1. Create Content Directory

First, create a directory for your content in the docs folder:

docs/your-section/

Add an index.md file with appropriate front matter:

---
title: Your Section Title
---

# Your Section Content

2. Add Navigation Item

Edit docusaurus.config.ts to add a new navigation item in the navbar section:

navbar: {
  // ...existing code...
  items: [
    // ...existing items...
    {
      type: 'docSidebar',
      sidebarId: 'yourSectionSidebar', // Must match the sidebar ID in sidebars.ts
      position: 'left',
      label: 'Your Section',
    },
    // ...other items...
  ],
},

3. Configure Sidebar

Edit sidebars.ts to add a new sidebar configuration:

const sidebars: SidebarsConfig = {
  // ...existing sidebars...
  
  // Your section sidebar
  yourSectionSidebar: [{type: 'autogenerated', dirName: 'your-section'}],
};

The dirName should match the directory name you created in step 1.

Current Examples

Process Section

We currently have implemented this pattern for the "Process" section:

1. Content directory: docs/process/
2. Navigation item in docusaurus.config.ts:

   {
     type: 'docSidebar',
     sidebarId: 'processSidebar',
     position: 'left',
     label: 'Process',
   }
3. Sidebar configuration in sidebars.ts:

   processSidebar: [{type: 'autogenerated', dirName: 'process'}]

Best Practices

• Keep directory names consistent with sidebar IDs for maintainability
• Use kebab-case for directory names (e.g., your-section)
• Use camelCase for sidebar IDs (e.g., yourSectionSidebar)
• Always include an index.md file in each content directory
• Ensure the sidebar ID in docusaurus.config.ts matches exactly the one defined in sidebars.ts

Troubleshooting

If your new section doesn't appear correctly:

1. Verify the sidebar ID matches in both configuration files
2. Check that the directory name in sidebars.ts matches your actual directory name
3. Ensure your content directory has at least one markdown file
4. Restart the development server to apply changes