DocsSidebar

The DocsSidebar component provides a navigation sidebar for documentation pages with section pills and a hierarchical page structure.

Usage

Copy<script setup lang="ts">
import { DocsSidebar } from '@/components/DocsSidebar'
import type { ContentNavigationItem } from '@nuxt/content'

const tree: ContentNavigationItem = {
  title: "Docs",
  path: "/docs",
  children: [
    {
      title: "Getting Started",
      children: [
        {
          title: "Introduction",
          path: "/docs/getting-started/introduction",
        },
      ],
    },
  ],
}
</script>

<template>
  <DocsSidebar :tree="tree" />
</template>

Features

Sections

The sidebar displays section pills at the top, defined in app/lib/navigation.ts:

Copyexport const NAV_SECTIONS: NavItem[] = [
  { name: "Get Started", href: "/docs/introduction" },
  { name: "Components", href: "/docs/components" },
]

Navigation Tree

The sidebar automatically renders a navigation tree from your content structure:

• Groups pages by section
• Shows icons from frontmatter navigation.icon
• Highlights active page
• Supports nested structures

Filtering

You can exclude sections or pages from the sidebar:

Copy// Exclude entire sections
export const SIDEBAR_EXCLUDED_SECTIONS: string[] = ["installation"]

// Exclude specific pages
export const SIDEBAR_EXCLUDED_PAGES: string[] = ["/docs/introduction"]

API Reference

DocsSidebar

ContentNavigationItem

Customization

Styling

The sidebar uses Tailwind classes and can be customized:

• Sticky positioning at the top
• Scrollable content area
• Blur effects at top and bottom
• Responsive visibility (hidden on mobile, shown on desktop)

Icons

Icons are displayed using the LucideIcon component. Set icons in your markdown frontmatter:

Copy---
title: My Page
---