Sidebar

Configuring the sidebar is very simple! Modify the src/config/sidebar.json file to add or remove items from the sidebar. The sidebar is generated based on the structure of the src/pages directory. Each item in the sidebar corresponds to a directory or file in the src/pages directory.

You may be looking at the sidebar config, and wondering how you can change anything.

{
  "order": [
    {
      "items": ["index.mdx", "started.mdx"]
    },
    {
      "category": "Customization",
      "items": ["theme.mdx", "sidebar.mdx"]
    },
    {
      "category": "More",
      "items": [
        "info.mdx",
        "more",
        {
          "name": "Author",
          "redirect": "https://www.naai.nz"
        }
      ]
    }
  ]
}

Let’s break down the example above:

• order: This is an array of objects. Each object represents a section in the sidebar.
  • items: This is an array of strings. Each string is the name of a file in the src/pages directory. The order of the items in this array will be the order they appear in the sidebar.
  • category: This is a string. This is the name of the category in the sidebar.
  • redirect: This is a string. This is the URL that the sidebar item will redirect to when clicked.

When you create a new .mdx file in the src/pages directory, you can add it to the sidebar by adding the filename to the order array, under the specific category you want it to appear in.

Adding a new category

To add a new category to the sidebar, simply create a new object in the order array with the category key set to the name of the category, and the items key set to an array of the files you want to appear in that category.

{
  "category": "New Category",
  "items": ["new-item.mdx", "another-item.mdx"]
}

Adding a redirect

To redirect to an external url, you can add a redirect key to the sidebar item with the URL you want to redirect to.

{
  "name": "Author",
  "redirect": "https://www.naai.nz"
}

Directories

Directories in the src/pages directory will automatically be converted to categories in the sidebar. The items in the directory will be the items in the category.

You must also add the directory name to the order array to make it appear in the sidebar.

{
  "items": ["more"]
}