Sidebar Styling Examples

Before you start with styling the Sidebar, I recommend creating a new sidebar in the sidebars folder so you can change between sidebars in the future if desired. When you are done with the new sidebar, you will have to update the docusaurus.config.ts file.

docusaurus.config.ts | Update the highlighted line with new Sidebar filename

        docs: {
          showLastUpdateAuthor: true,
          showLastUpdateTime: true,
          routeBasePath: '/', // Serve the docs at the site's root
          sidebarCollapsible: true,
          sidebarPath: './sidebars/customAutogen.ts',
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/TrueBankai416/BankaiTechDocs/tree/main/',
        },

Auto-Generated Sidebar

./sidebars/yourNewSidebar.ts | Content after Docker/Docs will be Auto-Generated in the Sidebar

{
      type: 'category',
      label: 'Getting Started with Docker',
      link: { type: 'doc', id: 'Docker/Introduction' },
      items: [
        {
          type: 'autogenerated',
          dirName: 'Docker/Docs', // Generate sidebar slice from docs/Docker/Docs
        },
      ],      
   },

Directory Tree | All content in the Docs folder will auto-generate in the sidebar

└── docs/
    └── Docker/
        ├── Docs/
        │   ├── Installing Docker/
        │   ├── Helpful Commands.mdx
        │   └── Troubleshooting.mdx
        └── Introduction.mdx

Example with Multiple Directories

Directory Tree | All content in the Docs folder will auto-generate in the sidebar

└── docs/
    ├── Docker/
    │   ├── Docs/
    │   │   ├── Installing Docker/
    │   │   ├── Helpful Commands.mdx
    │   │   └── Troubleshooting.mdx
    │   └── Introduction.mdx
    ├── Nextcloud/
    │   ├── Docs/
    │   │   └── Example.mdx
    │   └── Introduction.mdx
    ├── NextcloudPI/
    │   ├── Docs/
    │   │   └── Example.mdx
    │   └── Introduction.mdx
    └── MariaDB/
        ├── Docs/
        │   └── Example.mdx
        └── Introduction.mdx

./sidebars/yourNewSidebar.ts

{
      type: 'category',
      label: 'Getting Started with Docker',
      link: { type: 'doc', id: 'Docker/Introduction' },
      items: [
        {
          type: 'autogenerated',
          dirName: 'Docker/Docs', // Generate sidebar slice from docs/Docker/Docs
        },
      ],      
   },
   {
    type: 'category',
    label: 'Nextcloud',
    link: { type: 'doc', id: 'Nextcloud/Introduction' },
    items: [
     {
          type: 'autogenerated',
          dirName: 'Nextcloud/Docs', // Generate sidebar slice from docs/Nextcloud/Docs
     },
    ],
  }, 
  {
    type: 'category',
    label: 'NextcloudPI',
    link: { type: 'doc', id: 'NextcloudPI/Introduction' },
    items: [
      {
          type: 'autogenerated',
          dirName: 'NextcloudPI/Docs', // Generate sidebar slice from docs/NextcloudPI/Docs
      },
    ],
  },
  { 
     type: 'category',
     label: 'MariaDb',
     items: [
       {
          type: 'autogenerated',
          dirName: 'MariaDB/Docs', // Generate sidebar slice from docs/MariaDB/Docs
      },
    ],
  },

Link Introduction file to Dropdown

This will show a specified file when clicking on a dropdown menu in the sidebar instead of simply just opening the sidebar content.

Directory Tree | Introduction.mdx is linked to the Folder named Docker

└── docs/
    └── Docker/
        ├── Docs/
        │   ├── Installing Docker/
        │   ├── Helpful Commands.mdx
        │   └── Troubleshooting.mdx
        └── Introduction.mdx

./sidebars/yourNewSidebar.ts | Change Introduction to the Desired Filename

{
      type: 'category',
      label: 'Getting Started with Docker',
      link: { type: 'doc', id: 'Docker/Introduction' },
      items: [
        {
          type: 'autogenerated',
          dirName: 'Docker/Docs', // Generate sidebar slice from docs/Docker/Docs
        },
      ],      
   },

Link Introduction file to Sub-Dropdowns

This will show a specified file when clicking on a dropdown menu within another dropdown menu in the sidebar instead of simply just opening the sidebar content.

Directory Tree | Files with the same name as their parent directory will open when the Dropdown Menu is Clicked

└── docs/
    ├── Reverse Proxy/
    │   └── Introduction.mdx
    └── Docs/
        ├── Certbot/
        │   ├── Cloudflare/
        │   │   ├── Cloudflare.mdx
        │   │   └── Installation.mdx
        │   └── Certbot.mdx
        └── Nginx/
            ├── Nginx.mdx
            └── Installing Nginx.mdx

Directory Tree | Files with the same name as their parent directory will open when the Dropdown Menu is Clicked

└── docs/
    ├── Reverse Proxy/
    │   └── Introduction.mdx
    └── Docs/
        ├── Certbot/
        │   ├── Cloudflare/
        │   │   ├── Cloudflare.mdx
        │   │   └── Installation.mdx
        │   └── Certbot.mdx
        └── Nginx/
            ├── Nginx.mdx
            └── Installing Nginx.mdx

Directory Tree | Files with the same name as their parent directory will open when the Dropdown Menu is Clicked

└── docs/
    ├── Reverse Proxy/
    │   └── Introduction.mdx
    └── Docs/
        ├── Certbot/
        │   ├── Cloudflare/
        │   │   ├── Cloudflare.mdx
        │   │   └── Installation.mdx
        │   └── Certbot.mdx
        └── Nginx/
            ├── Nginx.mdx
            └── Installing Nginx.mdx

When you Click on the Dropdown menu named Certbot you will start viewing the file named Certbot.mdx, If you click on the Dropdown menu named Cloudflare it will view the file named Cloudflare.mdx. and so on.

./sidebars/yourNewSidebar.ts | Content after Reverse Proxy/Docs will be Auto-Generated in the Sidebar

   {  
     type: 'category',
     label: 'Reverse Proxy',
     link: { type: 'doc', id: 'Reverse Proxy/Introduction' },
     items: [
      {
          type: 'autogenerated',
          dirName: 'Reverse Proxy/Docs', // Generate sidebar slice from docs/Reverse Proxy/Docs
      },
     ],
   },

Manually Configured Sidebar

For this sidebar you have to manually add any new directories and files in order for them the appear in the sidebar

./sidebars/customSidebar.ts

{
      type: 'category',
      label: 'Getting Started with Docker',
      link: { type: 'doc', id: 'Docker/Introduction' },
      items: [
        {
          type: 'category',
          label: 'Installation',
          items: [
            'Docker/Installing Docker/Docker Engine',
            'Docker/Installing Docker/Docker-Compose',
          ],
        },
         'Docker/Docs/Helpful Commands',
         'Docker/Troubleshooting/Docker',
      ],      
   },
   {
    type: 'category',
    label: 'Nextcloud',
    link: { type: 'doc', id: 'Nextcloud/Introduction' },
    items: [
     {
        type: 'category',
        label: 'Installation',
        items: [
          'Nextcloud/Installation/Minimum',
          'Nextcloud/Installation/Collabora',
          'Nextcloud/Installation/Memories',
          'Nextcloud/Installation/Complete',
         ],
      },   
        'Nextcloud/Docs/Updating',
        'Nextcloud/Docs/Pre-built Images',
        'Nextcloud/Docs/Helpful Commands',
     {
       type: 'category',
       label: 'Troubleshooting',
       items: [
         'Nextcloud/Troubleshooting/Nextcloud',
         'Nextcloud/Troubleshooting/Nextcloud Memories',
         'Nextcloud/Troubleshooting/Collabora Code',
         'Nextcloud/Troubleshooting/OnlyOffice',
        ],
     },
     ],
  }, 

Resources

• Docusaurus Sidebar Configuration Examples - Official examples from the Docusaurus repository
• Sidebar Item Types Reference - Full reference for all sidebar item types
• Multi-instance Docs Plugin - For managing multiple sidebars
• Docusaurus Recipes: Sidebar Organization - Advanced patterns for sidebar configuration
• GitHub: Docusaurus Community Examples - Real-world examples from the community