Sidebar Configuration
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.
This page is a configuration reference; see the guide for full usage
This page lists the syntax and differences of the two configuration entry points (collection-level vs. global), which makes it a handy lookup.
If you want to learn sidebars systematically — nested structures, groups, custom titles, icons, per-language sidebars, separators, etc. — read the Sidebar Guide.
Collection-Level Sidebar Configuration
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:
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
})
})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.
Global Sidebar Configuration
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.
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
// Global sidebar configuration
sidebar: {
'/config/': [ // Matches /config/ path
{ text: 'Theme Configuration', link: 'theme' },
{ text: 'Locales Configuration', link: 'locales' },
]
}
})
})import { defineThemeConfig } from 'vuepress-theme-plume'
export default defineThemeConfig({
// Define global sidebar in independent config file
sidebar: {
'/config/': [
{ text: 'Theme Configuration', link: 'theme' },
{ text: 'Locales Configuration', link: 'locales' },
]
}
})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.
