Docs Sidebar — Vanilla

Documentation sidebar navigation with vanilla HTML. Same BEM as Astro/Svelte.

Docs Sidebar

Sidebar navigation for documentation sites: grouped links with active state. Same BEM classes and structure as the Astro Docs Sidebar. Populate links from your own nav config; add docs-sidebar__link--active to the current page link.

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 is the same component. Below is a compact demo with the sidebar and placeholder main content.

Page title

This is the main content area. The sidebar links to Introduction, Foundations, and Components. Use the same BEM structure and add docs-sidebar__link--active on the current page link.

On mobile, collapse the sidebar behind a toggle so the main area fills the viewport.

HTML (structure)

Use the BEM classes below. Replace hrefs and labels with your nav data; set docs-sidebar__link--active on the link that matches the current path.

html html 
<aside id="docs-sidebar" class="docs-sidebar" aria-label="Documentation navigation" tabindex="0">
  <nav class="docs-sidebar__nav">
    <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/overview" class="docs-sidebar__link">Overview</a></li>
        <li class="docs-sidebar__item"><a href="/docs/showcase" class="docs-sidebar__link">Showcase</a></li>
        <li class="docs-sidebar__item"><a href="/docs/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">
        <li class="docs-sidebar__item"><a href="/docs/design-system" class="docs-sidebar__link">Design System</a></li>
        <li class="docs-sidebar__item"><a href="/docs/theming" class="docs-sidebar__link">Theming</a></li>
        <li class="docs-sidebar__item"><a href="/docs/accessibility" class="docs-sidebar__link">Accessibility</a></li>
        <li class="docs-sidebar__item"><a href="/docs/colors" class="docs-sidebar__link">Colors</a></li>
      </ul>
    </div>
    <div class="docs-sidebar__group">
      <h2 class="docs-sidebar__group-label">Components</h2>
      <ul class="docs-sidebar__list">
        <li class="docs-sidebar__item"><a href="/docs/components" class="docs-sidebar__link">Overview</a></li>
        <li class="docs-sidebar__item"><a href="/docs/components/button" class="docs-sidebar__link">Button</a></li>
        <li class="docs-sidebar__item"><a href="/docs/components/docs-sidebar" class="docs-sidebar__link docs-sidebar__link--active" aria-current="page">Docs Sidebar</a></li>
      </ul>
    </div>
  </nav>
</aside>

View Docs Sidebar on the Astro docs for props and layout (toggle + overlay on mobile).

Other frameworks: Astro ¡ Svelte ¡ Vue ¡ React

← Back to Vanilla components