How to make sidebar with children elements in Vitepress?

Question

I'm trying to represent my folder tree in the sidebar but when I click on one of the Group parent elements, the children elements are not rendered.

Another thing that's weird is that the Group elements have no cursor: pointer css property, like you would expect on a clickable object. This is my .vitepress/config.ts

export default {
  title: "blub docs",
  description: "blub",
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Examples', link: '/markdown-examples' }
    ],
    sidebar: {
      '/': [
        {
          text: 'Group 1',
          collapsible: true,
          children: [
            '/group1/page1.md',
            '/group1/page2.md',
          ],
        },
        {
          text: 'Group 2',
          collapsible: true,
          children: [
            '/group2/page1.md',
            '/group2/page2.md',
          ],
        },
      ],
    }
  }
}

I've also commented out the layout from root/index.md so that the sidebar is visible on the landing page (if that is relevant):

[//]: # (layout: home)

This is the default layout of vitepress. I've implemented a custom layout but ended up having exactly the same issue.

I did not try this, but as I can see on their documentation: https://vitepress.dev/reference/default-theme-sidebar#collapsible-sidebar-groups propertyName for children is `items`, not `children` — rosmak, Mar 22 '23 at 13:21
This renders the child elements below the parent but has no indent and the parent is still not a collapsible object. The children can't be hidden. — Artur Müller Romanov, Mar 22 '23 at 13:34
And also, to enable collapsing. instead of `collapsible`, you should add `collapsed`: true/false, and then you will get toggle button, also from their docs — rosmak, Mar 22 '23 at 14:01

score 0 · Answer 1 · answered Mar 22 '23 at 14:00

Ok, as of vitepress version 1.0.0-alpha.61 this is the correct way of configuring a collapsible multi-layer sidebar:

sidebar: [
    {
      text: 'Group 1',
      items: [
        {
          text: 'Group 2',
          collapsed: true,
          items: [
            { text: 'blub1', link: '/group1/page1.md' },
            { text: 'blub2', link: '/group1/page2.md' },
          ],
        },
      ],
    },
    {
      text: 'Group 2',
      collapsed: true,
      items: [
        { text: 'blub1', link: '/group2/page1.md' },
        { text: 'blub2', link: '/group2/page2.md' },
      ],
    },
],

source: https://vitepress.dev/reference/default-theme-sidebar#collapsible-sidebar-groups

How to make sidebar with children elements in Vitepress?

1 Answers1