Navigation

Sidebar and navigation patterns.

Sidebar Navigation

Structure

<aside class="sidebar">
  <div class="sidebar-logo">App Name</div>
  <nav>
    <a href="/dashboard" class="sw-list-item active">
      <svg>...</svg>
      Dashboard
    </a>
    <a href="/users" class="sw-list-item">
      <svg>...</svg>
      Users
    </a>
  </nav>
</aside>

CSS

.sidebar {
  width: 260px;
  background: var(--sw-bg-card);
  border-right: 1px solid var(--sw-border-default);
  padding: var(--sw-space-6);
  height: 100vh;
  position: fixed;
}

.sidebar-logo {
  font-size: var(--sw-text-xl);
  font-weight: var(--sw-font-bold);
  margin-bottom: var(--sw-space-8);
}