← →

Sidebar

Sidebar is a native web component (zero dependencies) that builds an application's side navigation, with header, body and footer slots. On desktop it stays fixed and inline; on screens up to 768px it becomes a modal off-canvas drawer (with focus trap, ESC and backdrop) reusing the same content. Use it when you need persistent primary navigation, optionally collapsible to a rail of icons.

Preview

<div style="height: 380px; display: flex; border: 1px solid var(--pura-border); border-radius: var(--pura-radius); overflow: hidden;">
  <pura-sidebar collapsible>
    <div slot="header">Acme Inc.</div>

    <pura-sidebar-item href="#" active>
      <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9.5 12 3l9 6.5"/><path d="M5 10v10h14V10"/></svg>
      Home
    </pura-sidebar-item>
    <pura-sidebar-item href="#">
      <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
      Dashboard
    </pura-sidebar-item>
    <pura-sidebar-item href="#">
      <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 12 0v1"/></svg>
      Team
    </pura-sidebar-item>

    <pura-sidebar-item slot="footer" href="#">
      <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/></svg>
      Sign out
    </pura-sidebar-item>
  </pura-sidebar>

  <main style="flex:1; padding: var(--pura-space-4);">
    <h3>Content</h3>
    <p>On mobile the sidebar turns into a drawer.</p>
  </main>
</div>

<!--
  Collapse on desktop: document.querySelector('pura-sidebar').toggle()
  Open/close on mobile: .openMobile() / .closeMobile()
  Events: 'open' and 'close' (fired in mobile mode)
-->

Attributes

Attribute	Type	Default	Description
`collapsible`	boolean	false	Enables collapsing the sidebar to a rail of icons (pura-sidebar).
`collapsed`	boolean	false	Collapses to the narrow rail and hides the labels; only takes effect with collapsible (pura-sidebar).
`href`	string	—	When present on pura-sidebar-item, renders an <a>; otherwise a <button>.
`active`	boolean	false	Highlights the item as current and adds aria-current="page" (pura-sidebar-item).

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/sidebar.js"></script>

JavaScript

import "./pura/lib/sidebar.js";

Slots

headerdefaultfootericon

Events

openclose