Creating a sidebar with child elements in Vitepress: A beginner's guide

I'm having trouble displaying my folder tree in the sidebar. When I click on a parent element like Group, the children elements are not showing up as expected.

https://i.sstatic.net/kdc98.png

One strange thing is that the Group elements do not have the CSS property cursor: pointer to indicate they are clickable. Here's a snippet from 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 disabled the layout in root/index.md so that the sidebar appears on the landing page, but the issue persists:

[//]: # (layout: home)

Although I tried implementing a custom layout, it did not resolve the problem.

Answer №1

Alright, in the latest vitepress update with version 1.0.0-alpha.61, here's the proper method for setting up 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:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The latest version of Material UI icons caused compatibility issues with React-Select

I recently made the switch from using @material-ui/icons version 4.11.2 to @mui/material and @mui/icons-material version 5.2.3 Although material UI is not directly integrated with react-select, there seems to be some interaction happening. The transition ...

Creating Seamless, Unified Shape-to-Shape (Containers) Transition with CSS and JavaScript - A Step-by-Step Guide

I am experimenting with creating a unique effect where two rectangular shapes, each containing text and with rounded ends, move towards each other, merge to form a single rounded rectangle as the page is scrolled down, and then separate back when scrolling ...

Submitting form based on HTML select input issue

I am facing an issue with a select form where the value resets to "10" every time I send the form. Is there a way to keep the selected option, for example "20", after submitting the form? Below is the code snippet: <form method='get' name=&a ...

Is there a quicker method to update the state of an array of objects?

Here is my React state example: const [questionList, setQuestionList] = useState([ { _type: "radio", answer: "", point: "", question: "", options: ["A", "B"], ...

The JSON key has been labeled as "valid", making it difficult to access in JavaScript as demonstrated in a JSfiddle example

Initially, I transformed a Plist file (XML formatted) into JSON using an online tool. Extracting the important data from this extensive JSON file was not a challenge. Utilizing this crucial data, I am reconstructing a new JSON file that is concise and cont ...

The Node.js callback is executed before the entire function has finished executing

const fileSystem = require('fs'); const filePath = require('path'); module.exports.getFiles = function(filepath, callback) { let files = []; fileSystem.exists(filepath, function(exists){ if(exists){ fileSy ...

Using setInterval on a batch of freshly generated div elements

I am interested in creating a small website where I can display multiple clocks for various time zones. However, I have encountered an issue with the setInterval function. Below is the code snippet: function addClock () { $("#container").append('& ...

How can we use jQuery to compare two blocks and set them to have the same height value?

Is there a way to compare and set equal height for two blocks within the main div? <div class="main-content"> <div class="content-1"></div> <div class="content-2"></div> </div> Javascript Code: var $content1 = $(&ap ...

A guide to extracting text from HTML elements with puppeteer

This particular query has most likely been asked numerous times, but despite my extensive search, none of the solutions have proven effective in my case. Here is the Div snippet I am currently dealing with: <div class="dataTables_info" id=&qu ...

Guide on setting an attribute value with JavaScriptExecutor in Selenium WebDriver

I am attempting to set an attribute value for all instances of the same type of <img> tag on My website, for example: <img src="images/temp/advertisement.png"> and I want to set style="display: none" so that I can hide them. I have tried the ...

Update the class name by utilizing template literals

I'm currently in the process of mastering template literals as I have a project where I need to utilize them. However, I seem to be encountering an issue that I can't quite figure out. Here is the code that is currently working: const classes = ...

Is it possible for search engines like google to index Javascript content that is stored within divs and loaded onto the page?

My website utilizes JavaScript to dynamically add content to div elements, like so: <script> //This content is generated by PHP var contents = [ "Item 1", "Item 2" ]; //Display the first item document.getElementById( "item" ).textCo ...

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

Ensuring accuracy within a personalized directive that is implemented numerous times within a single webpage (AngularJS)

Recently, I designed a unique directive that includes various inputs and dropdowns. To ensure proper binding between the outer and inner scopes for two-way data binding, I implemented an isolate scope. This setup allows me to reuse the directive multiple t ...

Process called gulp useref eliminates certain files from the pipeline

Is there a way to exclude the gulp.src file from output? I am aiming to bundle only JavaScript and output .js files, not HTML. The following blocks in base.html are utilized for bundling JavaScript with gulp-useref: <!-- build:js app.core.js --> &l ...

Hover over the sprites using the "spritely" plugin to see the magic unfold

I'm looking to initiate an animation when the mouse hovers over a sprite and have it stop when the mouse moves away. After exploring various solutions, I found one that seemed promising: Why does jQuery spritely animation play an extra frame on secon ...

What steps can I take to incorporate a user-controlled autoscroll feature into this Carousel?

I am in the process of creating a "slideshow" using text boxes that can be scrolled with arrow buttons. My goal is to have the slideshow automatically scroll only until the user interacts by clicking one of the arrow buttons. Below is the state logic re ...

Setting a TypeScript collection field within an object prior to sending an HTTP POST request

Encountered an issue while attempting to POST an Object (User). The error message appeared when structuring it as follows: Below is the model class used: export class User { userRoles: Set<UserRole>; id: number; } In my TypeScript file, I included ...

Verify that JavaScript is capable of performing mathematical operations such as addition and multiplication successfully

When dealing with a specific set of "Strings" that represent integers in an addition operation, how can one determine if the calculation is feasible in javascript? For example: 2 + 2 (certainly possible) 20000000000000000 - 1 (impossible) 2e50 + 2e60 (i ...

What is the best way to use command line arguments within a Node.js script?

As a newcomer to the world of programming, I find myself struggling to make progress despite putting in significant effort. Although it may seem like a trivial question, my lack of progress is becoming frustrating. Currently, I am working on a node.js scr ...