Vitepress-sidebar NPM

🔌 VitePress Sidebar

Programming Language Usage Commit Count npm bundle size

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
⚡️ 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 { generateSidebar } from 'vitepress-sidebar';

export default defineConfig({
  themeConfig: {
    sidebar: generateSidebar({
      /*
       * For detailed instructions, see the links below:
       * https://vitepress-sidebar.cdget.com/guide/options
       */
      //
      // ============ [ RESOLVING PATHS ] ============
      // documentRootPath: '/',
      // scanStartPath: null,
      // resolvePath: null,
      // basePath: null,
      //
      // ============ [ GROUPING ] ============
      // collapsed: true,
      // collapseDepth: 2,
      // rootGroupText: 'Contents',
      // rootGroupLink: 'https://github.com/jooy2',
      // rootGroupCollapsed: false,
      //
      // ============ [ GETTING MENU TITLE ] ============
      // useTitleFromFileHeading: true,
      // useTitleFromFrontmatter: true,
      // useFolderLinkFromIndexFile: false,
      // useFolderTitleFromIndexFile: false,
      // frontmatterTitleFieldName: 'title',
      //
      // ============ [ GETTING MENU LINK ] ============
      // useFolderLinkFromSameNameSubFile: false,
      // useFolderLinkFromIndexFile: false,
      // folderLinkNotIncludesFileName: false,
      //
      // ============ [ INCLUDE / EXCLUDE ] ============
      // excludePattern: ['README.md', 'folder/'],
      // excludeFilesByFrontmatterFieldName: 'exclude',
      // includeDotFiles: false,
      // includeEmptyFolder: false,
      // includeRootIndexFile: false,
      // includeFolderIndexFile: false,
      //
      // ============ [ STYLING MENU TITLE ] ============
      // hyphenToSpace: true,
      // underscoreToSpace: true,
      // 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,
      // sortMenusByFrontmatterDate: false,
      // sortMenusOrderByDescending: false,
      // sortMenusOrderNumericallyFromTitle: false,
      // sortMenusOrderNumericallyFromLink: false,
      //
      // ============ [ 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

Contribute

You can report issues on GitHub Issue Tracker.

You can also request a pull to fix bugs and add frequently used features. To contribute to a project, follow these steps

Clone the project.
Create changes (features, bugfixes) in a new branch.
Write a test (test/specs/options.spec.ts) if a new option has been added.
Create a documentation (docs/) if a new option is added.
Request a pull request. Include any changes or considerations in the description for a quick code review.