20 CSS Hamburger Menus 13 / 20

Mobile Bottom Nav Bar with Floating Hamburger

PWA-style phone frame with a fixed bottom tab bar, a centered floating hamburger launcher, and a slide-up bottom sheet grid.

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

The code

<div class="chm-13">
  <div class="chm-13__scene">
    <div class="chm-13__phone" id="chm-13-phone">
      <div class="chm-13__screen">
        <div class="chm-13__welcome">Good evening</div>
        <h1>Your space,<br>at a glance.</h1>
        <div class="chm-13__cards">
          <div class="chm-13__card chm-13__wide"><div class="chm-13__t">Balance</div><div class="chm-13__v">$4,820.50</div></div>
          <div class="chm-13__card"><div class="chm-13__t">Activity</div><div class="chm-13__v">38 <small>+12%</small></div></div>
          <div class="chm-13__card"><div class="chm-13__t">Saved</div><div class="chm-13__v">$1,240</div></div>
          <div class="chm-13__card"><div class="chm-13__t">Streak</div><div class="chm-13__v">14 days</div></div>
        </div>
      </div>

      <div class="chm-13__scrim"></div>
      <div class="chm-13__sheet">
        <div class="chm-13__grab"></div>
        <h3>// Launcher</h3>
        <div class="chm-13__grid">
          <a href="#"><span class="chm-13__em">◐</span>Home</a>
          <a href="#"><span class="chm-13__em">✦</span>Explore</a>
          <a href="#"><span class="chm-13__em">↻</span>History</a>
          <a href="#"><span class="chm-13__em">♥</span>Saved</a>
          <a href="#"><span class="chm-13__em">⚙</span>Settings</a>
          <a href="#"><span class="chm-13__em">◇</span>More</a>
        </div>
      </div>

      <button class="chm-13__fab" aria-label="Open launcher"><span class="chm-13__b"><i></i><i></i><i></i></span></button>

      <nav class="chm-13__tabbar">
        <a class="chm-13__tab chm-13__active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M3 10l9-7 9 7v10a1 1 0 01-1 1h-5v-7H9v7H4a1 1 0 01-1-1z"/></svg>Home</a>
        <a class="chm-13__tab" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>Search</a>
        <span class="chm-13__spacer-fab"></span>
        <a class="chm-13__tab" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M12 21s-7-4.5-7-10a4 4 0 017-2 4 4 0 017 2c0 5.5-7 10-7 10z"/></svg>Saved</a>
        <a class="chm-13__tab" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>You</a>
      </nav>
    </div>
    <div class="chm-13__tag">BOTTOM_NAV // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fragment+Mono&display=swap');
.chm-13, .chm-13 *, .chm-13 *::before, .chm-13 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-13{
  --bg:#0d0f17;--surface:#171a26;--violet:#8b7bff;--mint:#4fe3b0;--amber:#ffc15e;--fog:#eef0f7;--muted:#8b90a3;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Plus Jakarta Sans',sans-serif;background:#05060a;color:var(--fog);
  position:relative;
}
.chm-13__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden;display:grid;place-items:center;padding:18px}
.chm-13__phone{position:relative;width:300px;max-width:94%;height:424px;border-radius:36px;overflow:hidden;background:var(--bg);box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05)}
.chm-13__screen{position:absolute;inset:0;overflow-y:auto;padding:30px 18px 110px;background:radial-gradient(60% 40% at 50% 0%,rgba(139,123,255,.18),transparent 60%)}
.chm-13__screen::-webkit-scrollbar{display:none}
.chm-13__welcome{font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--mint);text-transform:uppercase}
.chm-13__screen h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-top:6px;line-height:1.05}
.chm-13__cards{margin-top:20px;display:grid;gap:10px}
.chm-13__card{background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:14px}
.chm-13__t{font-family:'Fragment Mono',monospace;font-size:9px;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.chm-13__v{font-size:1.3rem;font-weight:700;margin-top:6px}
.chm-13__v small{font-size:.75rem;color:var(--mint);font-weight:600}
.chm-13__wide{background:linear-gradient(130deg,var(--violet),#5c4ad6)}
.chm-13__wide .chm-13__t{color:rgba(255,255,255,.7)}.chm-13__wide .chm-13__v{color:#fff}
.chm-13__tabbar{position:absolute;left:14px;right:14px;bottom:14px;height:56px;border-radius:22px;
  background:rgba(23,26,38,.85);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-around;padding:0 12px;z-index:30}
.chm-13__tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);text-decoration:none;font-size:9px;font-weight:600;transition:color .3s}
.chm-13__tab svg{width:18px;height:18px}
.chm-13__active{color:var(--violet)}
.chm-13__spacer-fab{width:54px}
.chm-13__fab{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);z-index:40;width:54px;height:54px;border-radius:50%;cursor:pointer;border:none;
  background:linear-gradient(140deg,var(--violet),var(--amber));display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(139,123,255,.5)}
.chm-13__b{width:22px;height:13px;position:relative}
.chm-13__b i{position:absolute;left:0;height:2.2px;width:100%;background:#fff;border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-13__b i:nth-child(1){top:0}.chm-13__b i:nth-child(2){top:5.5px}.chm-13__b i:nth-child(3){top:11px}
.chm-13__phone.is-open .chm-13__b i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.chm-13__phone.is-open .chm-13__b i:nth-child(2){opacity:0}
.chm-13__phone.is-open .chm-13__b i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.chm-13__sheet{position:absolute;left:0;right:0;bottom:0;z-index:35;background:var(--surface);border-radius:26px 26px 0 0;border-top:1px solid rgba(255,255,255,.08);
  padding:22px 18px 100px;transform:translateY(100%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.chm-13__phone.is-open .chm-13__sheet{transform:translateY(0)}
.chm-13__grab{width:36px;height:4px;border-radius:3px;background:rgba(255,255,255,.18);margin:0 auto 18px}
.chm-13__sheet h3{font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.chm-13__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chm-13__sheet a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:14px;background:rgba(255,255,255,.04);color:var(--fog);text-decoration:none;font-size:10px;font-weight:600;transition:background .3s,transform .3s}
.chm-13__sheet a:hover{background:rgba(139,123,255,.16);transform:translateY(-3px)}
.chm-13__em{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(139,123,255,.18);font-size:14px}
.chm-13__scrim{position:absolute;inset:0;z-index:33;background:rgba(5,6,10,.55);opacity:0;pointer-events:none;transition:.4s}
.chm-13__phone.is-open .chm-13__scrim{opacity:1;pointer-events:auto}
.chm-13__tag{position:absolute;bottom:14px;right:18px;font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(238,240,247,.4)}

@media (prefers-reduced-motion: reduce){
  .chm-13__sheet,.chm-13__scrim,.chm-13__b i,.chm-13__tab,.chm-13__sheet a{transition:none !important}
}
(() => {
  const root = document.querySelector('.chm-13');
  if (!root) return;
  const phone = root.querySelector('#chm-13-phone');
  const btn = root.querySelector('.chm-13__fab');
  const scrim = root.querySelector('.chm-13__scrim');
  btn.addEventListener('click', () => phone.classList.toggle('is-open'));
  scrim.addEventListener('click', () => phone.classList.remove('is-open'));
})();

More from 20 CSS Hamburger Menus

Multi-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 Menu3D Rotating Canvas Mobile Hamburger MenuPure CSS Hamburger Menu (No JavaScript)Bootstrap 5 Responsive Navbar with HamburgerCSS Slide Down Dropdown Hamburger MenuMinimalist 3-Line CSS Menu Icon with Hover EffectsHamburger Menu with Morphing Icon Animations
View the full collection →

Search CodeFronts

Loading…

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