Docs Sidebar Component

A sidebar navigation component for documentation sites. Renders grouped links (e.g. Introduction, Foundations, Components) with active-state styling. Used in the docs layout with a toggle and overlay on mobile.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Live example

The sidebar on the left of this page is the Docs Sidebar. Below is a compact demo with the same nav data and placeholder main content.

Usage

Pass currentPath (current URL pathname) and framework (or path prefix) so links and active state match the docs framework (Astro, Svelte, React, Vue, Vanilla). The sidebar uses DOCS_NAV from config; you can provide a custom nav structure via a prop if you extend the component.

Usage

Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.

Astro Vanilla Svelte Vue React

---
import DocsSidebar from '../components/DocsSidebar.astro';
import { getFrameworkFromPath } from '../config/frameworks';

const currentPath = Astro.url.pathname;
const { framework } = getFrameworkFromPath(currentPath);
---

<div class="docs-layout">
  <aside id="docs-sidebar" class="docs-sidebar" aria-label="Documentation navigation">
    <DocsSidebar currentPath={currentPath} framework={framework} />
  </aside>
  <main class="docs__main">
    <div class="docs__container">
      <div class="docs__content">
        <!-- Your page content here -->
      </div>
    </div>
  </main>
</div>

<!-- Layout: sidebar + main. BEM: docs-sidebar, docs-sidebar__nav, docs-sidebar__group, docs-sidebar__group-label (small heading), docs-sidebar__list, docs-sidebar__item, docs-sidebar__link, docs-sidebar__link--active. See /docs/vanilla/components/docs-sidebar for full HTML with correct hrefs. -->

<script>
  import { DocsSidebar } from '$lib/rizzo';
</script>

<div class="docs-layout">
  <DocsSidebar currentPath={$page.url.pathname} pathPrefix="/docs" />
  <main class="docs__main">
    <div class="docs__container">
      <div class="docs__content"><!-- Your page content --></div>
    </div>
  </main>
</div>

<script setup>
import DocsSidebar from '@/components/rizzo/DocsSidebar.vue';
</script>

<template>
  <DocsSidebar>
    <div class="docs-sidebar__group">
      <h2 class="docs-sidebar__group-label">Introduction</h2>
      <ul class="docs-sidebar__list">
        <li class="docs-sidebar__item"><a href="/docs/vue/overview" class="docs-sidebar__link">Overview</a></li>
        <li class="docs-sidebar__item"><a href="/docs/vue/showcase" class="docs-sidebar__link">Showcase</a></li>
        <li class="docs-sidebar__item"><a href="/docs/vue/getting-started" class="docs-sidebar__link">Getting Started</a></li>
      </ul>
    </div>
    <div class="docs-sidebar__group">
      <h2 class="docs-sidebar__group-label">Foundations</h2>
      <ul class="docs-sidebar__list">...</ul>
    </div>
    <div class="docs-sidebar__group">
      <h2 class="docs-sidebar__group-label">Components</h2>
      <ul class="docs-sidebar__list">...</ul>
    </div>
  </DocsSidebar>
</template>

import { DocsSidebar } from './components/react';

<DocsSidebar
  pathPrefix="/docs/react"
  currentPath={pathname}
/>

Props (Astro)

currentPath (string) — Current URL pathname (e.g. Astro.url.pathname)
framework (Framework) — { framework: { pathPrefix } } so hrefs use the correct prefix (/docs, /docs/svelte, /docs/vanilla)

BEM classes

docs-sidebar, docs-sidebar__nav, docs-sidebar__group, docs-sidebar__group-label (small uppercase heading), docs-sidebar__list, docs-sidebar__item, docs-sidebar__link, docs-sidebar__link--active. Sidebar layout and mobile behavior (toggle, overlay) are in the docs layout; see DocsLayout.astro and pages.css.

Other frameworks: Vanilla · Svelte · Vue · React

Docs Sidebar Component — Astro