Docusaurus Plugin Sidebar

Installation

yarn add docusaurus-plugin-sidebar

Usage

docusaurus.config.js

Add plugin:

module.exports = {
  plugins: [require.resolve('docusaurus-plugin-sidebar')],
}

Options:

module.exports = {
  plugins: [
    [ 
      require.resolve('docusaurus-plugin-sidebar'), 
      {
        dir: 'sidebar', // default sidebar directory
        file: 'sidebars.js' // default sidebar file
      }
    ]
  ],
}

Sidebar Directory

Create a sidebar directory:

mkdir sidebar

Sidebar Item Files

Create sidebar item files

vi sidebar/basic.yml

someSidebar: 
  - Docusaurus:
    - doc1
    - doc2
    - doc3
  - Features:
    - mdx

Run

Local Development

$ yarn start

Build

$ yarn build

Advanced

Document

- doc

Ref

- ref: doc

Link

- name: Link Name
  link: https://example.com

Category

- upper category:
  - doc1
  - ref: doc2
  - name: Link Name
    link: https://example.com
  - category:
    - sub category:
      - doc3
      - doc4

Auto-import

This is not the original option for docusaurus; it is easy to use when there are many documents.

There are three types.

1. All files in the directory will be included, in alphabetical order.

- Category Name: path/to/dir

2. You can also select files from the directory.

- Category Name: path/to/dir
  items:
    - doc1
    - doc2
    - doc5
    - doc4

3. If it leaves as the empty value, top directory (docs) documents are included. It is easier to know if you set it as an empty string.

- Category Name:
- Category Name: ''

Look at the example code.