Sidebar Example: sidebarItemTemplate

This is a custom sidebar example generated from the following code:

import { defineConfig } from 'vitepress'
import { useSidebar } from 'vitepress-openapi'
import spec from '../docs/public/openapi.json'

export default defineConfig({
  lang: 'en-US',
  title: 'VitePress OpenAPI',
  description: 'Generate VitePress API Docs from OpenAPI specifications',
  themeConfig: {
    sidebar: sidebar.generateSidebarGroups({
      linkPrefix: "#",
      sidebarItemTemplate: (method, path) => {
        const operation = spec.paths[path]?.[method];
        return `<div class="OASidebarItem group/oaSidebarItem" style="display: grid; grid-template-columns: 1fr auto;">
        <span class="text" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${operation ? operation.summary : path}</span>
        <span class="OASidebarItem-badge OAMethodBadge--${method.toLowerCase()}">${method.toUpperCase()}</span>
      </div>`;
      }
    }),
  },
})

---

Back to Sidebar Examples