20 CSS Hamburger Menus 04 / 20

Slide-out Sidebar / Off-Canvas Navigation

Dashboard/web-app shell with a true "push" effect — the content canvas slides, scales, dims and rounds as a mint-on-void sidebar glides in.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="chm-04">
  <div class="chm-04__scene">
    <div class="chm-04__trg" aria-label="Toggle sidebar">
      <div class="chm-04__b"><i></i><i></i><i></i></div>
    </div>

    <aside class="chm-04__sidebar">
      <div class="chm-04__brand"><div class="chm-04__glyph">◇</div><span>Off·Canvas</span></div>
      <div class="chm-04__grp">Workspace</div>
      <a class="chm-04__on" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>Dashboard</a>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 12h18M3 6h18M3 18h18"/></svg>Streams</a>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>Activity</a>
      <div class="chm-04__grp">Library</div>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 4h12l4 4v12H4z"/><path d="M16 4v4h4"/></svg>Documents</a>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3l9 4-9 4-9-4z"/><path d="M3 12l9 4 9-4"/></svg>Models</a>
      <div class="chm-04__spacer"></div>
      <div class="chm-04__card"><b>Push effect</b><p>Content shifts + scales as the canvas slides aside.</p></div>
    </aside>

    <div class="chm-04__shell">
      <div class="chm-04__canvas">
        <div class="chm-04__dots"></div>
        <div class="chm-04__hero">
          <span class="chm-04__pill">App Shell · Off-Canvas</span>
          <h1>Slide. <em>Push.</em><br>Breathe.</h1>
          <p>The sidebar nudges the content instead of covering it.</p>
        </div>
      </div>
    </div>
    <div class="chm-04__tag">OFF_CANVAS // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

.chm-04, .chm-04 *, .chm-04 *::before, .chm-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.chm-04{
  --void:#0b0e0d;--panel:#11201c;--mint:#3ef0a8;--lime:#c6ff4a;--fog:#dfe9e5;--muted:rgba(223,233,229,.55);
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Sora',sans-serif;background:var(--void);color:var(--fog);
  position:relative;
}
.chm-04__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-04__shell{position:relative;min-height:460px;transition:transform .65s cubic-bezier(.16,1,.3,1),filter .65s;will-change:transform}
.chm-04.is-pushed .chm-04__shell{transform:translateX(230px) scale(.94);border-radius:24px;overflow:hidden;filter:brightness(.6)}
.chm-04__canvas{position:relative;min-height:460px;background:
  radial-gradient(circle at 80% 18%,rgba(62,240,168,.14),transparent 45%),
  radial-gradient(circle at 12% 88%,rgba(198,255,74,.1),transparent 45%),
  var(--void);
  display:grid;place-items:center;text-align:center;padding:24px}
.chm-04__dots{position:absolute;inset:0;opacity:.4;background-image:radial-gradient(rgba(223,233,229,.12) 1px,transparent 1px);background-size:28px 28px}
.chm-04__hero{position:relative;z-index:2}
.chm-04__pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mint);border:1px solid rgba(62,240,168,.4);padding:6px 14px;border-radius:99px;margin-bottom:20px}
.chm-04__hero h1{font-size:clamp(2rem,7vw,4.4rem);font-weight:700;letter-spacing:-.03em;line-height:.92}
.chm-04__hero h1 em{font-style:normal;color:var(--lime)}
.chm-04__hero p{font-family:'IBM Plex Mono',monospace;margin-top:14px;color:var(--muted);font-size:12px;letter-spacing:.1em}
.chm-04__trg{position:absolute;top:22px;left:22px;z-index:60;width:52px;height:52px;border-radius:14px;cursor:pointer;
  display:grid;place-items:center;background:rgba(223,233,229,.06);border:1px solid rgba(223,233,229,.12);backdrop-filter:blur(10px);
  transition:transform .5s,border-color .4s}
.chm-04__trg:hover{border-color:var(--mint)}
.chm-04.is-pushed .chm-04__trg{transform:translateX(230px)}
.chm-04__b{width:24px;height:14px;position:relative}
.chm-04__b i{position:absolute;left:0;height:2.4px;width:100%;background:var(--fog);border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s,background .4s}
.chm-04__b i:nth-child(1){top:0}.chm-04__b i:nth-child(2){top:6px}.chm-04__b i:nth-child(3){top:12px}
.chm-04.is-pushed .chm-04__b i:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--mint)}
.chm-04.is-pushed .chm-04__b i:nth-child(2){opacity:0}
.chm-04.is-pushed .chm-04__b i:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--mint)}
.chm-04__sidebar{position:absolute;top:0;left:0;height:100%;width:230px;z-index:40;
  background:linear-gradient(170deg,var(--panel),#0a1512);
  border-right:1px solid rgba(62,240,168,.16);
  transform:translateX(-100%);transition:transform .65s cubic-bezier(.16,1,.3,1);
  padding:24px 18px;display:flex;flex-direction:column}
.chm-04.is-pushed .chm-04__sidebar{transform:translateX(0)}
.chm-04__brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.chm-04__glyph{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--mint),var(--lime));display:grid;place-items:center;color:var(--void);font-weight:700}
.chm-04__brand span{font-weight:700;letter-spacing:.04em;font-size:.95rem}
.chm-04__grp{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px}
.chm-04__sidebar a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--fog);text-decoration:none;font-weight:400;font-size:.88rem;transition:background .3s,color .3s,transform .3s;margin-bottom:2px}
.chm-04__sidebar a svg{width:17px;height:17px;flex-shrink:0;opacity:.8}
.chm-04__sidebar a:hover{background:rgba(62,240,168,.1);color:var(--mint);transform:translateX(4px)}
.chm-04__sidebar a.chm-04__on{background:linear-gradient(90deg,rgba(62,240,168,.16),transparent);color:var(--mint)}
.chm-04__spacer{flex:1}
.chm-04__card{background:rgba(223,233,229,.04);border:1px solid rgba(223,233,229,.08);border-radius:14px;padding:12px}
.chm-04__card b{display:block;font-size:.78rem;margin-bottom:4px}
.chm-04__card p{font-size:.66rem;color:var(--muted);line-height:1.5;font-family:'IBM Plex Mono',monospace}
.chm-04__tag{position:absolute;bottom:18px;right:24px;z-index:5;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(223,233,229,.4)}

@media (prefers-reduced-motion: reduce){
  .chm-04__shell,.chm-04__sidebar,.chm-04__trg,.chm-04__b i{transition:none !important}
}
(() => {
  const root = document.querySelector('.chm-04');
  if (!root) return;
  const btn = root.querySelector('.chm-04__trg');
  btn.addEventListener('click', () => root.classList.toggle('is-pushed'));
})();

More from 20 CSS Hamburger Menus

Responsive Navbar with Mobile-Only Hamburger ToggleMinimalist / Floating Hamburger ButtonTailwind CSS Hamburger MenuAccessible Hamburger Menu (WCAG Compliant)Full Screen Blur Overlay Hamburger MenuMobile Bottom Nav Bar with Floating HamburgerMulti-Level Dropdown Hamburger Menu (Nested Accordion)Flexbox Navbar with Right-Aligned Hamburger IconCircular Expand / Radial Ripple Mobile MenuFixed Sticky Header with Shrinking Hamburger IconNeumorphic Hamburger Menu Toggle ButtonBrutalist CSS Bordered Hamburger Menu
View the full collection →

Search CodeFronts

Loading…

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