Default Theme: Sidebar

Configure the sidebar navigation for your VitePress site.

Basic Sidebar

The sidebar is the main navigation component. You can configure it via themeConfig.sidebar.

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/introduction' },
          { text: 'Getting Started', link: '/getting-started' }
        ]
      }
    ]
  }
}

Multiple Sidebars

You can define different sidebars for different sections:

export default {
  themeConfig: {
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          items: [
            { text: 'Introduction', link: '/guide/introduction' },
            { text: 'Getting Started', link: '/guide/getting-started' }
          ]
        }
      ],
      '/config/': [
        {
          text: 'Config',
          items: [
            { text: 'Introduction', link: '/config/introduction' },
            { text: 'App Config', link: '/config/app-config' }
          ]
        }
      ]
    }
  }
}

Collapsible Sidebar Groups

Make sidebar groups collapsible:

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Guide',
        collapsed: false,
        items: [
          { text: 'Introduction', link: '/introduction' },
          { text: 'Getting Started', link: '/getting-started' }
        ]
      },
      {
        text: 'Advanced',
        collapsed: true,
        items: [
          { text: 'Advanced Config', link: '/advanced-config' },
          { text: 'Custom Theme', link: '/custom-theme' }
        ]
      }
    ]
  }
}

Auto Sidebar

Generate sidebar automatically from directory structure:

import { generateSidebar } from 'vitepress-sidebar'

export default {
  themeConfig: {
    sidebar: generateSidebar({
      documentRootPath: 'docs',
      scanStartPath: null,
      resolvePath: '/docs/',
      useTitleFromFileHeading: true,
      useTitleFromFrontmatter: true,
      frontmatterTitleFieldName: 'title',
      useFolderTitleFromIndexFile: false,
      useFolderLinkFromIndexFile: false,
      hyphenToSpace: true,
      underscoreToSpace: true,
      capitalizeFirst: false,
      capitalizeEachWords: false,
      collapsed: true,
      collapseDepth: 2,
      sortMenusByName: false,
      sortMenusByFrontmatterOrder: false,
      sortMenusByFrontmatterDate: false,
      sortMenusOrderByDescending: false,
      sortMenusOrderNumericallyFromTitle: false,
      sortMenusOrderNumericallyFromLink: false,
      frontmatterOrderDefaultValue: 0,
      manualSortFileNameByPriority: ['first.md', 'second', 'third.md'],
      removePrefixAfterOrdering: false,
      prefixSeparator: '.',
      excludeFiles: ['first.md', 'secret.md'],
      excludeFilesByFrontmatterFieldName: 'exclude',
      excludeFolders: ['secret-folder'],
      excludeFoldersFromIndex: ['assets', 'public', 'resources'],
      includeDotFiles: false,
      includeRootIndexFile: false,
      includeFolderIndexFile: false,
      includeEmptyFolder: false,
      rootGroupText: 'Contents',
      rootGroupLink: 'https://github.com/jooy2',
      rootGroupCollapsed: false,
      convertSameNameSubFileToGroupIndexPage: false,
      folderLinkNotIncludesFileName: false,
      keepMarkdownSyntaxFromTitle: false,
      debugPrint: false,
    })
  }
}

Sidebar Item Options

Basic Item

{ text: 'Introduction', link: '/introduction' }

Item with Active Match

{
  text: 'Introduction',
  link: '/introduction',
  activeMatch: '/introduction'
}

External Link

{
  text: 'GitHub',
  link: 'https://github.com/vuejs/vitepress'
}

Group with Items

{
  text: 'Group Title',
  items: [
    { text: 'Item 1', link: '/item-1' },
    { text: 'Item 2', link: '/item-2' }
  ]
}