5 Sidebar Editing

You may have found yourself adding a new page to the docs. Naturally it will be accessible through its generated URL.

However: You will want to include the new page inside the sidebar. Follow the next steps to learn how to modify the sidebar.

Changing the sidebar navigation

1. Locate the configuration file of the VuePress site, in this case /docs/.vuepress/config.js
2. Open the configuration file in your preferred editor.
3. Look for the themeConfig object within the file.
4. Within themeConfig, find the key sidebar, which defines the sidebar structure.
5. Modify the values in the sidebar or nav section to change the sidebar navigation. You can add, remove, or rearrange links as needed.
6. Save the changes to the configuration file.

Example sidebar configuration

sidebar: [
  {
    title: 'Learn',
    path: '/learn/',
    collapsable: true,
    sidebarDepth: 2,
    initialOpenGroupIndex: 0,
    children: [
      {
        title: 'About WAX',
        path: '/learn/about-wax/',
        collapsable: true,
        sidebarDepth: 2,
        children: [
          {
            title: 'What is WAX?',
            path: '/learn/about-wax/what-is-wax',
          },
        ],
      },
    ],
  },
];