Skip to main content

Add Multiple Docs in Docusaurus

Easy and simple how to add multiple-instance docs in Docusaurus.

New content​

First, add new directory and some markdown files. We will create an e-commerce site.

my-website
├── blog
│   ├── 2019-05-28-hola.md
│   ├── 2019-05-29-hello-world.md
│   └── 2020-05-30-welcome.md
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   └── mdx.md
├── fashion
│   ├── top.md
│   ├── bottom.md
│   ├── shoes.md
│   └── accessories.md
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.ts
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
└── sidebars.ts

Add plugin​

You have to add a plugin to handle another docs category with 4 options.

docusaurus.config.ts
const config: Config = {
  // ...
  plugins: [
    // ...
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'fashion',
        path: 'fashion',
        routeBasePath: 'fashion',
        sidebarPath: './sidebars.ts',
      },
    ],
    // ...
  ],
  // ...
};
  • id is a unique ID
  • path is your file directory
  • routeBasePath is a URL on web browser
  • sidebarPath is a sidebar path. If you want to use an autogenerated, you may use the same file.

Last, add your new docs in navbar in config.themeConfig.navbar.items as an Object[]

docusaurus.config.ts
const config: Config = {
  themeConfig: {
    navbar: {
      items: [
        // ...
        {
          type: 'docSidebar',
          sidebarId: 'tutorialSidebar',
          position: 'left',
          label: 'Tutorial',
        },
        {
          type: 'docSidebar',
          sidebarId: 'tutorialSidebar',
          label: 'Fashion',
          docsPluginId: 'fashion',
        },
      ],
    },
  },
};
  • docsPluginId must match your plugin ID from previous step.

After you're done, run web dev server and you may visit your link.