🔌 VitePress Sidebar

VitePress Sidebar is a plugin for VitePress that automatically configures and manages the sidebar of your page with simple settings.

• ⚡️ Optimized for the latest version of VitePress
• ⚡️ Easy to use, lots of options to customize to your liking
• ⚡️ Lightweight bundle file size
• ⚡️ Multiple Sidebars support
• ⚡️ Frontmatter support
• ⚡️ Per-folder configuration file (sidebar.config.json) support
• ⚡️ Dynamic routes support
• ⚡️ The sidebar refreshes in the dev server when a page is added or removed
• ⚡️ TypeScript support
• ⚡️ Customize menus for sorting, special character conversion, file and folder filters, and more!

Documentation (Getting Started & All option lists)

Installing and using the package and defining all the utility methods can be found on the documentation page below: https://vitepress-sidebar.cdget.com/guide/getting-started

import { withSidebar } from 'vitepress-sidebar';

const vitePressConfigs = {
  title: 'VitePress Sidebar',
  themeConfig: {
    // ...
  }
};

export default defineConfig(
  withSidebar(vitePressConfigs, {
    /*
     * For detailed instructions, see the links below:
     * https://vitepress-sidebar.cdget.com/guide/options
     */
    //
    // ============ [ RESOLVING PATHS ] ============
    // documentRootPath: '/',
    // scanStartPath: null,
    // resolvePath: null,
    // basePath: null,
    // followSymlinks: false,
    //
    // ============ [ GROUPING ] ============
    // collapsed: false,
    // collapseDepth: 2,
    // collapseFromLevel: 1,
    // rootGroupText: 'Contents',
    // rootGroupLink: 'https://github.com/jooy2',
    // rootGroupCollapsed: false,
    //
    // ============ [ GETTING MENU TITLE ] ============
    // useTitleFromFileHeading: false,
    // useTitleFromFrontmatter: false,
    // useFolderTitleFromIndexFile: false,
    // frontmatterTitleFieldName: 'title',
    // dynamicRouteTitleParam: 'title',
    //
    // ============ [ GETTING MENU LINK ] ============
    // useFolderLinkFromSameNameSubFile: false,
    // useFolderLinkFromIndexFile: false,
    // folderLinkNotIncludesFileName: false,
    //
    // ============ [ INCLUDE / EXCLUDE ] ============
    // excludeByGlobPattern: ['README.md', 'folder/'],
    // excludeFilesByFrontmatterFieldName: 'exclude',
    // excludeByFolderDepth: undefined,
    // includeDotFiles: false,
    // includeEmptyFolder: false,
    // includeRootIndexFile: false,
    // includeFolderIndexFile: false,
    // includeDynamicRoutes: false,
    //
    // ============ [ STYLING MENU TITLE ] ============
    // hyphenToSpace: false,
    // underscoreToSpace: false,
    // capitalizeFirst: false,
    // capitalizeEachWords: false,
    // keepMarkdownSyntaxFromTitle: false,
    // removePrefixAfterOrdering: false,
    // prefixSeparator: '.',
    //
    // ============ [ SORTING ] ============
    // manualSortFileNameByPriority: ['first.md', 'second', 'third.md'],
    // sortFolderTo: null,
    // sortMenusByName: false,
    // sortMenusByFileDatePrefix: false,
    // sortMenusByFrontmatterOrder: false,
    // frontmatterOrderDefaultValue: 0,
    // sortMenusByFileCreateDate: false,
    // sortMenusByFileModifyDate: false,
    // sortMenusByFrontmatterDate: false,
    // sortMenusOrderByDescending: false,
    // sortMenusOrderNumericallyFromTitle: false,
    // sortMenusOrderNumericallyFromLink: false,
    // sortMenusByCustomFunction: (a, b) => a.fileName.localeCompare(b.fileName),
    //
    // ============ [ MISC ] ============
    // debugPrint: false,
  })
);

Real-world Uses

VitePress Sidebar is utilized in a variety of project environments, including my own web services.

• To explore packages used other than: https://github.com/jooy2/vitepress-sidebar/network/dependents

Contributing

Anyone can contribute to the project by reporting new issues or submitting a pull request. For more information, please see CONTRIBUTING.md.

License

Please see the LICENSE file for more information about project owners, usage rights, and more.