Sidebar Configuration

About 453 wordsAbout 2 min

2025-10-09

Overview

The sidebar is a core navigation area located on the left side of the page in the theme, serving the important function of guiding users to jump between different pages.

In the VuePress ecosystem, the default theme @vuepress/theme-default manages the sidebar through the sidebar configuration option. While retaining this classic configuration method, this theme also provides a more flexible collection-level sidebar configuration solution.

Collections are the core concept for organizing series of documents in the theme. When a collection type is set to doc, you can define a dedicated sidebar navigation within collection.sidebar.

The following example demonstrates how to create a collection of type doc under the docs directory and configure its sidebar:

.vuepress/config.ts

import { defineUserConfig
 } from 'vuepress'
import { defineCollection
, plumeTheme
 } from 'vuepress-theme-plume'

// Define document collection configuration
const demo
 = defineCollection
({
  type
: 'doc',
  dir
: 'demo', // Document directory
  title
: 'Demo', // Collection name
  sidebar
: [ // Sidebar configuration
    { text
: 'one item', link
: 'one' },
    { text
: 'two item', link
: 'two' },
  ]
})

export default defineUserConfig
({
  theme
: plumeTheme
({
    collections
: [demo
], // Register collection
  })
})

.vuepress/plume.config.ts

import { defineCollection
, defineThemeConfig
 } from 'vuepress-theme-plume'

// Define collection using independent config file
const demo
 = defineCollection
({
  type
: 'doc',
  dir
: 'demo',
  title
: 'Demo',
  sidebar
: [
    { text
: 'one item', link
: 'one' },
    { text
: 'two item', link
: 'two' },
  ]
})

export default defineThemeConfig
({
  collections
: [demo
], 
})

The defineCollection utility function provided by the theme simplifies the collection configuration process. For complete collection configuration options, please refer to the Collections Configuration Documentation.

If you prefer to manage the sidebar using the traditional global configuration approach, you can directly use the sidebar option in the theme configuration. This method is suitable for scenarios that do not require navigation grouping by collections.

.vuepress/config.ts

import { defineUserConfig
 } from 'vuepress'
import { plumeTheme
 } from 'vuepress-theme-plume'

export default defineUserConfig
({
  theme
: plumeTheme
({
    // Global sidebar configuration
    sidebar
: {
      '/config/': [ // Matches /config/ path
        { text
: 'Sidebar Configuration', link
: 'sidebar-1' },
        { text
: 'Sidebar Configuration', link
: 'sidebar-2' },
      ]
    }
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig
 } from 'vuepress-theme-plume'

export default defineThemeConfig
({
  // Define global sidebar in independent config file
  sidebar
: {
    '/config/': [
      { text
: 'Sidebar Configuration', link
: 'sidebar-1' },
      { text
: 'Sidebar Configuration', link
: 'sidebar-2' },
    ]
  }
})

Both configuration methods have their advantages: collection-level configuration is suitable for modular document structures, while global configuration is convenient for unified navigation management in simple projects.

For complete sidebar configuration options and usage tips, please refer to the Sidebar Configuration Guide.