Sidebar — Cider UI

Selectors

.sidebar: Vertical navigation with section headers, compact items, and auto-hiding scrollbar.
data-tinted: Attribute modifier on .sidebar — uses primary-color tinted background for the active item instead of neutral gray.

Default

HTML

<nav class="sidebar" aria-label="Sidebar">
  <div>
    <h2>Getting Started</h2>
    <a href="#">Installation</a>
    <a href="#" data-active>Quick Start</a>
    <a href="#">Configuration</a>
  </div>
  <div>
    <h2>Components</h2>
    <a href="#">Button</a>
    <a href="#">Card</a>
    <a href="#">Dialog</a>
    <a href="#">Popover</a>
  </div>
</nav>

With Icons

HTML

<nav class="sidebar" aria-label="Sidebar">
  <div>
    <h2>Navigation</h2>
    <a href="#" data-active>
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
      Home
    </a>
    <a href="#">
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
      Documents
    </a>
    <a href="#">
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/></svg>
      Projects
    </a>
    <a href="#">
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
      Settings
    </a>
  </div>
</nav>

Tinted Active

HTML

<nav class="sidebar" data-tinted aria-label="Sidebar">
  <div>
    <h2>Library</h2>
    <a href="#" data-active>
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><circle cx="8" cy="18" r="4"/><path d="M12 18V2l7 4"/></svg>
      Music
    </a>
    <a href="#">
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
      Videos
    </a>
    <a href="#">
      <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
      Photos
    </a>
  </div>
</nav>

Flat (no sections)

HTML

<nav class="sidebar" aria-label="Sidebar">
  <a href="#" data-active>All Mail</a>
  <a href="#">Inbox</a>
  <a href="#">Drafts</a>
  <a href="#">Sent</a>
  <a href="#">Archive</a>
  <a href="#" disabled aria-disabled="true">Trash</a>
</nav>

aria-current

HTML

<nav class="sidebar" data-tinted aria-label="Sidebar">
  <div>
    <h2>Account</h2>
    <a href="#" aria-current="page">Profile</a>
    <a href="#">Security</a>
    <a href="#">Notifications</a>
    <a href="#">Billing</a>
  </div>
</nav>

Accessibility

Use <nav aria-label="..."> to give the sidebar a meaningful label for screen readers.
Mark the current page with aria-current="page" or data-active — both apply the active style.
Disabled items use aria-disabled="true" with pointer-events: none.