Skip to content
LSD Framework
Component

Side menu

A vertical nav primitive. Sections group, items expand, the current route lights with an accent rail. Collapse to icon-only when the page asks for breathing room; at narrow widths it tucks itself into a drawer trigger.

01 · Collapsible with section groups
Selecting Galaxies shows the current-route rail and accent tint. Click the chevron groups to fold and unfold nested rows.
02 · Icon-only compact (toggle to expand)
Compact mode keeps a 64px rail. Persisted to localStorage so the choice survives reloads.
03 · Sticky / pinned
Scroll this region — the menu rides the viewport once it reaches the top.
04 · Container-aware drawer trigger (narrow widths)
Resize this stage below 600px — the menu collapses to a drawer trigger via container query.
View HTML
<nav class="sm">
  <p class="sm__group-label">Build</p>
  <button class="sm__item" aria-current="page">
    <span class="sm__icon">◐</span><span class="sm__label">Home</span>
  </button>
  <div class="sm__group" data-open>
    <button class="sm__item">…<span class="sm__chev">›</span></button>
    <div class="sm__nest"><div>…</div></div>
  </div>
</nav>