Overview

The Sidebar component renders the left navigation panel. It supports grouped sections, nested groups, badges, active page highlighting, and collapsible sections. The sidebar is configured in qwik-docs.config.ts.

Look at the left panel — this kitchen sink project demonstrates all sidebar features.

Configuration

Manual Items

sidebar: [
  {
    label: 'Getting Started',
    items: [
      { label: 'Introduction', link: '/docs/getting-started/' },
      { label: 'Installation', link: '/docs/getting-started/install/' },
    ],
  },
]

Autogenerate from Directory

sidebar: [
  {
    label: 'Reference',
    autogenerate: { directory: 'docs/reference' },
  },
]

Nested Groups

sidebar: [
  {
    label: 'Guides',
    items: [
      { label: 'Quick Start', link: '/docs/guides/quickstart/' },
      {
        label: 'Advanced',
        items: [
          { label: 'Custom Themes', link: '/docs/guides/themes/' },
          { label: 'Plugins', link: '/docs/guides/plugins/' },
        ],
      },
    ],
  },
]

The main sidebar container. Reads the sidebar configuration from RouteData context.

SidebarSublist

Renders the recursive list of sidebar entries. Handles both SidebarLink and SidebarGroup types.

Prop	Type	Description
`entries`	`SidebarEntry[]`	Array of sidebar links and groups
`nested`	`boolean`	Whether this is a nested sublist

Types

SidebarLink

interface SidebarLink {
  type: 'link';
  label: string;
  href: string;
  isCurrent: boolean;
  badge?: Badge;
  attrs?: Record<string, string>;
}

SidebarGroup

interface SidebarGroup {
  type: 'group';
  label: string;
  entries: SidebarEntry[];
  collapsed: boolean;
  badge?: Badge;
}

Badge

interface Badge {
  text: string;
  variant: 'note' | 'tip' | 'caution' | 'danger' | 'default';
}

Features

Active page highlighting with aria-current="page"
Collapsible groups using <details> / <summary>
Badge support on both links and groups
Recursive nesting to any depth
Keyboard accessible
Hidden on mobile (shown via MobileMenuToggle)