10 CSS Sidebar Navigation 10 / 10

App-Style Vertical Sidebar Menu with Bottom-Pinned Profile

How to push a menu item to the bottom of a CSS sidebar — a sidebar layout with the profile section at the bottom, demonstrated by a Pulse project-management workspace.

Best forproductivity tools, PM apps, internal dashboards, team workspaces where identity and quick actions need permanent placement.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="sn-pin" aria-label="App-style sidebar with bottom-pinned profile demo">
  <aside class="sidebar" aria-label="Workspace navigation">
    <div class="ws" role="button" tabindex="0">
      <div class="ic" aria-hidden="true">P</div>
      <div><b>Pulse Team</b><small>Free plan</small></div>
      <span class="ch" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 9l4-4 4 4M16 15l-4 4-4-4"/></svg></span>
    </div>
    <nav class="nav">
      <div class="cap">Workspace</div>
      <a class="item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg><span>Board</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg><span>Tasks</span><span class="count">24</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>Calendar</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg><span>Docs</span></a>
      <div class="cap">Channels</div>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span>Messages</span><span class="dot" aria-label="Unread"></span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg><span>Activity</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2M16 3.13a4 4 0 010 7.75"/></svg><span>Members</span></a>
    </nav>
    <div class="profile-wrap">
      <div class="quick">
        <a href="#" title="Search" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg></a>
        <a href="#" title="Notifications" aria-label="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></a>
        <a href="#" title="Settings" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg></a>
      </div>
      <div class="profile" role="button" tabindex="0">
        <div class="avatar" aria-hidden="true"></div>
        <div><b>Jordan Reye</b><small>[email protected]</small></div>
        <span class="more" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></span>
      </div>
    </div>
  </aside>

  <main class="mainpane">
    <div class="head">
      <h1>Sprint Board</h1>
      <button class="new" type="button">+ New task</button>
    </div>
    <div class="board">
      <div class="col">
        <div class="ct"><i class="grey" aria-hidden="true"></i>To Do</div>
        <div class="task">Audit onboarding flow<small>Due Fri · Sam</small></div>
        <div class="task">Draft Q3 roadmap<small>No date</small></div>
      </div>
      <div class="col">
        <div class="ct"><i class="yellow" aria-hidden="true"></i>In Progress</div>
        <div class="task">Sidebar redesign<small>Due today · You</small></div>
      </div>
      <div class="col">
        <div class="ct"><i class="green" aria-hidden="true"></i>Done</div>
        <div class="task">Set up CI pipeline<small>Yesterday</small></div>
      </div>
    </div>
  </main>
</section>
/* ─── 10 App Sidebar with Bottom-Pinned Profile — PM workspace ── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

.sn-pin {
  --sn-pin-bg: #0c0c0f;
  --sn-pin-rail: #131318;
  --sn-pin-rail-2: #1c1c24;
  --sn-pin-line: #26262f;
  --sn-pin-txt: #ededf2;
  --sn-pin-muted: #85858f;
  --sn-pin-accent: #f5d90a;
  --sn-pin-accent-2: #a78bfa;
  --sn-pin-green: #4ade80;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Geist', 'Inter', sans-serif;
  background: var(--sn-pin-bg);
  color: var(--sn-pin-txt);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-pin *, .sn-pin *::before, .sn-pin *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-pin .sidebar {
  width: 256px; background: var(--sn-pin-rail); border-right: 1px solid var(--sn-pin-line);
  height: 100%; display: flex; flex-direction: column; flex-shrink: 0;
}
.sn-pin .ws { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; margin: .6rem;
  border-radius: 12px; background: var(--sn-pin-rail-2); cursor: pointer; transition: .18s; }
.sn-pin .ws:hover { background: #23232c; }
.sn-pin .ws .ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sn-pin-accent), var(--sn-pin-accent-2));
  display: grid; place-items: center; color: #0c0c0f; font-weight: 700; }
.sn-pin .ws b { font-size: .92rem; font-weight: 600; }
.sn-pin .ws small { display: block; color: var(--sn-pin-muted); font-size: .72rem; }
.sn-pin .ws .ch { margin-left: auto; color: var(--sn-pin-muted); }
.sn-pin .ws .ch svg { width: 16px; height: 16px; }

.sn-pin .nav { flex: 1; overflow-y: auto; padding: .5rem .7rem; }
.sn-pin .cap { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sn-pin-muted);
  font-weight: 600; padding: .9rem .8rem .35rem; font-family: 'Geist Mono', monospace; }
.sn-pin .item { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: 10px;
  color: var(--sn-pin-txt); text-decoration: none; font-size: .9rem; font-weight: 500; transition: .16s; }
.sn-pin .item svg { width: 19px; height: 19px; stroke-width: 1.8; color: var(--sn-pin-muted); flex-shrink: 0; }
.sn-pin .item:hover { background: var(--sn-pin-rail-2); }
.sn-pin .item:hover svg { color: var(--sn-pin-txt); }
.sn-pin .item.active { background: var(--sn-pin-rail-2); color: #fff; }
.sn-pin .item.active svg { color: var(--sn-pin-accent); }
.sn-pin .item .count { margin-left: auto; font-size: .72rem; color: var(--sn-pin-muted); font-family: 'Geist Mono', monospace; }
.sn-pin .item .dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--sn-pin-green); }

.sn-pin .profile-wrap { margin-top: auto; border-top: 1px solid var(--sn-pin-line); padding: .7rem; }
.sn-pin .quick { display: flex; gap: .4rem; margin-bottom: .5rem; }
.sn-pin .quick a { flex: 1; display: grid; place-items: center; padding: .55rem; border-radius: 9px;
  color: var(--sn-pin-muted); transition: .16s; }
.sn-pin .quick a:hover { background: var(--sn-pin-rail-2); color: var(--sn-pin-txt); }
.sn-pin .quick svg { width: 18px; height: 18px; stroke-width: 1.8; }
.sn-pin .profile { display: flex; align-items: center; gap: .7rem; padding: .6rem; border-radius: 12px;
  cursor: pointer; transition: .18s; }
.sn-pin .profile:hover { background: var(--sn-pin-rail-2); }
.sn-pin .avatar { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, #4ade80, #a78bfa); position: relative; }
.sn-pin .avatar::after { content: ""; position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--sn-pin-green); border: 2.5px solid var(--sn-pin-rail); }
.sn-pin .profile b { font-size: .88rem; font-weight: 600; }
.sn-pin .profile small { display: block; color: var(--sn-pin-muted); font-size: .72rem; }
.sn-pin .profile .more { margin-left: auto; color: var(--sn-pin-muted); }
.sn-pin .profile .more svg { width: 16px; height: 16px; }

.sn-pin .mainpane { flex: 1; padding: 2.5rem 3rem; min-width: 0; overflow-y: auto; }
.sn-pin .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; }
.sn-pin .head h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; }
.sn-pin .head .new { background: var(--sn-pin-accent); color: #0c0c0f; border: none; border-radius: 10px;
  padding: .6rem 1.1rem; font-weight: 600; font-size: .85rem; cursor: pointer; font-family: inherit; }
.sn-pin .board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.sn-pin .col { background: var(--sn-pin-rail); border: 1px solid var(--sn-pin-line); border-radius: 16px; padding: 1rem; }
.sn-pin .col .ct { font-size: .8rem; color: var(--sn-pin-muted); font-weight: 600; margin-bottom: .8rem;
  display: flex; align-items: center; gap: .5rem; font-family: 'Geist Mono', monospace; }
.sn-pin .col .ct i { width: 8px; height: 8px; border-radius: 50%; }
.sn-pin .col .ct i.grey { background: #85858f; }
.sn-pin .col .ct i.yellow { background: #f5d90a; }
.sn-pin .col .ct i.green { background: #4ade80; }
.sn-pin .task { background: var(--sn-pin-rail-2); border-radius: 11px; padding: .85rem; margin-bottom: .6rem; font-size: .85rem; }
.sn-pin .task small { display: block; color: var(--sn-pin-muted); font-size: .74rem; margin-top: .4rem; }

@media (max-width: 780px) {
  .sn-pin .sidebar { width: 74px; }
  .sn-pin .ws b, .sn-pin .ws small, .sn-pin .ws .ch, .sn-pin .cap,
  .sn-pin .item span, .sn-pin .item .count, .sn-pin .item .dot,
  .sn-pin .profile b, .sn-pin .profile small, .sn-pin .profile .more { display: none; }
  .sn-pin .ws { justify-content: center; padding: .7rem; }
  .sn-pin .item { justify-content: center; padding: .65rem; }
  .sn-pin .profile { justify-content: center; }
  .sn-pin .quick { flex-direction: column; }
  .sn-pin .mainpane { padding: 1.5rem; }
}

More from 10 CSS Sidebar Navigation

Pure CSS Collapsible Sidebar Navigation SnippetResponsive Sidebar Toggle with HTML and CSSLight & Flexible CSS Vertical Rail Menu (Collapsible)Responsive Dashboard Sidebar Navigation with SubmenusMulti-Level Vertical Sidebar Menu Template in HTML/CSSPure CSS Accordion Sidebar for Admin DashboardsFixed Full-Height CSS Sidebar Navigation LayoutModern Glassmorphism Floating Sidebar Design in CSSResponsive Off-Canvas Mobile Sidebar Navigation Overlay
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →