Skip to main content

Custom Docs Sidebars

Creating a sidebar is useful to:

  • Group multiple related documents
  • Display a sidebar on each of those documents
  • Provide paginated navigation, with next/previous button

Auto Generated Sidebar​

Docs sidebars for this template is configured at ./sidebars.js.

sidebars.js
const sidebars = {
  docsSidebar: [{ type: 'autogenerated', dirName: '.' }],
  extrasSidebar: [{type: 'autogenerated', dirName: 'extras'}],
};

A sidebar for all docs is generated with autogenerated. All docs will use this as their sidebar if not included in other sidebars.

Dedicated Sidebar​

With Auto Generated​

The Extras section has it's own sidebar. It is generated with autogenerated for all docs under ./docs/extras directory.

sidebars.js
const sidebars = {
  docsSidebar: [{ type: 'autogenerated', dirName: '.' }],
  extrasSidebar: [{type: 'autogenerated', dirName: 'extras'}],
};

All docs under ./docs/extras directory will use this sidebar.

Config Manually​

To manually assign docs with an individual sidebar, include the docs with a custom sidebar:

sidebars.js example
const sidebars = {
  docsSidebar: [{ type: 'autogenerated', dirName: '.' }],
  extrasSidebar: [{type: 'autogenerated', dirName: 'extras'}],
  customSidebar: ['start', 'features'],
};

Read more about Sidebar Items on Docusaurus' Docs site: https://docusaurus.io/docs/sidebar/items