28 CSS Hamburger Menus
16 / 28

All 28 in 28 CSS Hamburger Menus

  1. 01CSS Hamburger Menu with Clip-Path Circle Expansion
  2. 02Keyboard Navigable Hamburger Menu with ARIA Attributes
  3. 03Animated 3-Line to X Hamburger Icon Toggle CSS
  4. 04Slide-In Off-Canvas Drawer with Dimmed Backdrop Overlay
  5. 05Pure CSS Checkbox Hack Hamburger Navigation (No JavaScript)
  6. 06Responsive Hamburger Menu with Integrated Search Bar & Social Links
  7. 07Glassmorphism Backdrop Blur CSS Hamburger Navigation
  8. 08CSS Push Page Navigation Menu (Off-Canvas Content Shift)
  9. 09Pure CSS Hamburger Menu Without JavaScript
  10. 10CSS Hamburger Menu Morphing to Close Icon Animation
  11. 11Full Screen Mobile Navigation Overlay CSS
  12. 12CSS Slide Out Sidebar Navigation / Off Canvas Menu
  13. 13Responsive Navbar Mobile Hamburger Toggle Media Queries
  14. 14Minimalist Floating Hamburger Button CSS
  15. 15Tailwind CSS Responsive Hamburger Menu Component
  16. 16Bootstrap 5 Navbar Hamburger Menu Toggle Setup
  17. 17WCAG Accessible Hamburger Menu HTML CSS JS Example
  18. 18CSS Dropdown Slide Down Mobile Hamburger Menu
  19. 19Simple 3-Line CSS Hamburger Icon Hover Effect
  20. 20Full Screen Blur Overlay Hamburger Menu CSS
  21. 21Mobile Bottom Navigation Bar with Floating Hamburger Toggle
  22. 22Multi-Level Accordion Hamburger Dropdown Menu CSS
  23. 23Flexbox Navbar Right-Aligned Hamburger Icon CSS
  24. 24Radial Ripple Expand Mobile Hamburger Menu CSS
  25. 25Sticky Navbar Shrinking Hamburger Icon on Scroll
  26. 26Neumorphic Hamburger Toggle Button HTML CSS
  27. 27Brutalist Design Bordered CSS Hamburger Menu
  28. 283D Flip Canvas Mobile Hamburger Navigation CSS
Bootstrap 5MIT licensed

Bootstrap 5 Navbar Hamburger Menu Toggle Setup

The canonical Bootstrap 5.3 navbar, assembled correctly on the first try: navbar-expand-lg picks the breakpoint, navbar-toggler + data-bs-toggle wire the collapse plugin with zero custom JS, and every class in the chain is annotated so you know which ones are load-bearing. Includes the three fixes for 'bootstrap hamburger not working' (the #1 support thread for this pattern) and the CSS to replace the default toggler icon with an animated one.

Live Demo
Plain CSSTailwind v4
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<section class="chm-16" aria-label="Bootstrap 5 navbar hamburger setup demo">
  <div class="chm-16__stage">
    <div class="chm-16__frame">
      <nav class="navbar" aria-label="Main">
        <div class="container-fluid">
          <a class="navbar-brand" href="#home"><span class="brand-dot" aria-hidden="true"></span>Bootlace</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#chm16-nav" aria-controls="chm16-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="chm-16__bars" aria-hidden="true"><i></i><i></i><i></i></span>
          </button>
          <div class="collapse navbar-collapse" id="chm16-nav">
            <ul class="navbar-nav">
              <li class="nav-item"><a class="nav-link active" aria-current="page" href="#home">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
              <li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
              <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Beta</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="chm-16__page" aria-hidden="true"><span style="--w:76%"></span><span style="--w:90%"></span><span style="--w:58%"></span></div>
    </div>
    <p class="chm-16__note" aria-hidden="true">card is narrower than the <code>lg</code> breakpoint, so the toggler shows. The shim stands in for <code>bootstrap.bundle.min.js</code> here — load the real bundle in your project.</p>
  </div>
</section>
.chm-16,
.chm-16 *,
.chm-16 *::before,
.chm-16 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.chm-16 {
  background: var(--bg);
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  --body: oklch(1 0 0);
  --tertiary: oklch(0.97 0.004 260);
  --border: oklch(0.9 0.007 260);
  --ink: oklch(0.28 0.02 262);
  --mut: oklch(0.5 0.016 262);
  --primary: oklch(0.55 0.19 262);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.chm-16__stage {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: oklch(0.985 0.003 260);
  padding: 20px;
  display: grid;
  gap: 14px;
}

.chm-16__frame {
  container-type: inline-size;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--body);
  box-shadow: 0 14px 34px -26px oklch(0.3 0.03 262/.6);
}

.chm-16 .navbar {
  background: var(--tertiary);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}

.chm-16 .container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 16px;
}

.chm-16 .navbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
}

.chm-16 .brand-dot {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: linear-gradient(140deg,var(--primary),oklch(0.65 0.2 300));
}

.chm-16 .navbar-toggler {
  display: grid;
  place-items: center;
  width: 52px;
  height: 44px;
  border: 1px solid oklch(0.82 0.012 262);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: box-shadow .15s;
}

.chm-16 .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch,var(--primary) 35%,transparent);
}

.chm-16__bars {
  position: relative;
  width: 20px;
  height: 14px;
  display: block;
}

.chm-16__bars i {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: translate .28s,rotate .28s .04s,opacity .2s;
}

.chm-16__bars i:nth-child(1) {
  top: 0;
}

.chm-16__bars i:nth-child(2) {
  top: 6px;
}

.chm-16__bars i:nth-child(3) {
  top: 12px;
}

.chm-16 .navbar-toggler[aria-expanded="true"] .chm-16__bars i:nth-child(1) {
  translate: 0 6px;
  rotate: 45deg;
}

.chm-16 .navbar-toggler[aria-expanded="true"] .chm-16__bars i:nth-child(2) {
  opacity: 0;
}

.chm-16 .navbar-toggler[aria-expanded="true"] .chm-16__bars i:nth-child(3) {
  translate: 0 -6px;
  rotate: -45deg;
}

.chm-16 .navbar-collapse {
  flex-basis: 100%;
  overflow: hidden;
}

.chm-16 .navbar-collapse.collapse:not(.show) {
  display: none;
}

.chm-16 .navbar-collapse.collapsing {
  height: 0;
  transition: height .3s ease;
}

.chm-16 .navbar-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 6px 4px 10px;
}

.chm-16 .nav-link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mut);
  text-decoration: none;
  transition: color .15s,background .15s;
}

.chm-16 .nav-link:hover,
.chm-16 .nav-link:focus-visible {
  color: var(--ink);
  background: oklch(0.94 0.006 260);
}

.chm-16 .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch,var(--primary) 35%,transparent);
}

.chm-16 .nav-link.active {
  color: var(--ink);
  font-weight: 600;
}

.chm-16 .nav-link.disabled {
  color: oklch(0.72 0.008 262);
  pointer-events: none;
}

@container (min-width: 768px) {
  .chm-16 .navbar-toggler {
    display: none;
  }

  .chm-16 .navbar-collapse {
    flex-basis: auto;
  }

  .chm-16 .navbar-collapse.collapse:not(.show) {
    display: flex !important;
  }

  .chm-16 .navbar-nav {
    flex-direction: row;
    gap: 2px;
    padding: 0;
    margin-left: auto;
  }
}

.chm-16__page {
  padding: 16px;
  display: grid;
  gap: 11px;
}

.chm-16__page span {
  display: block;
  height: 10px;
  width: var(--w);
  border-radius: 99px;
  background: oklch(0.94 0.004 260);
}

.chm-16__note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--mut);
  text-wrap: pretty;
}

.chm-16__note code {
  font: 11px ui-monospace,Menlo,Consolas,monospace;
  background: oklch(0.93 0.005 260);
  border-radius: 5px;
  padding: 1.5px 6px;
}

@media (prefers-reduced-motion: reduce) {
  .chm-16 * {
    transition-duration: .01s !important;
  }
}
(function () {
  /* Stand-in for bootstrap.bundle.min.js collapse — same class dance, same timing. */
  document.querySelectorAll('.chm-16__frame').forEach(function (frame) {
    if (frame.dataset.bound) return; frame.dataset.bound = '1';
    var btn = frame.querySelector('[data-bs-toggle="collapse"]'),
        panel = frame.querySelector(btn.getAttribute('data-bs-target'));
    btn.addEventListener('click', function () {
      var opening = !panel.classList.contains('show');
      btn.setAttribute('aria-expanded', String(opening));
      panel.classList.remove('collapse');
      panel.classList.add('collapsing');
      panel.style.height = opening ? '0' : panel.scrollHeight + 'px';
      requestAnimationFrame(function () {
        panel.style.height = opening ? panel.scrollHeight + 'px' : '0';
      });
      setTimeout(function () {
        panel.classList.remove('collapsing');
        panel.classList.add('collapse');
        panel.classList.toggle('show', opening);
        panel.style.height = '';
      }, 300);
    });
  });
})();
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Hamburger Menu from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Bootstrap 5 Navbar Hamburger Menu Toggle Setup
Source: https://codefronts.com/navigation/css-hamburger-menus/bootstrap-5-responsive-navbar-with-hamburger/

The canonical Bootstrap 5.3 navbar, assembled correctly on the first try: navbar-expand-lg picks the breakpoint, navbar-toggler + data-bs-toggle wire the collapse plugin with zero custom JS, and every class in the chain is annotated so you know which ones are load-bearing. Includes the three fixes for 'bootstrap hamburger not working' (the #1 support thread for this pattern) and the CSS to replace the default toggler icon with an animated one.
## HTML
```html
<section class="chm-16" aria-label="Bootstrap 5 navbar hamburger setup demo">
  <div class="chm-16__stage">
    <div class="chm-16__frame">
      <nav class="navbar" aria-label="Main">
        <div class="container-fluid">
          <a class="navbar-brand" href="#home"><span class="brand-dot" aria-hidden="true"></span>Bootlace</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#chm16-nav" aria-controls="chm16-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="chm-16__bars" aria-hidden="true"><i></i><i></i><i></i></span>
          </button>
          <div class="collapse navbar-collapse" id="chm16-nav">
            <ul class="navbar-nav">
              <li class="nav-item"><a class="nav-link active" aria-current="page" href="#home">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
              <li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
              <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Beta</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="chm-16__page" aria-hidden="true"><span style="--w:76%"></span><span style="--w:90%"></span><span style="--w:58%"></span></div>
    </div>
    <p class="chm-16__note" aria-hidden="true">card is narrower than the <code>lg</code> breakpoint, so the toggler shows. The shim stands in for <code>bootstrap.bundle.min.js</code> here — load the real bundle in your project.</p>
  </div>
</section>
```
## CSS
```css
.chm-16,
.chm-16 *,
.chm-16 *::before,
.chm-16 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.chm-16 {
  background: var(--bg);
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  --body: oklch(1 0 0);
  --tertiary: oklch(0.97 0.004 260);
  --border: oklch(0.9 0.007 260);
  --ink: oklch(0.28 0.02 262);
  --mut: oklch(0.5 0.016 262);
  --primary: oklch(0.55 0.19 262);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.chm-16__stage {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: oklch(0.985 0.003 260);
  padding: 20px;
  display: grid;
  gap: 14px;
}

.chm-16__frame {
  container-type: inline-size;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--body);
  box-shadow: 0 14px 34px -26px oklch(0.3 0.03 262/.6);
}

.chm-16 .navbar {
  background: var(--tertiary);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}

.chm-16 .container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 16px;
}

.chm-16 .navbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
}

.chm-16 .brand-dot {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: linear-gradient(140deg,var(--primary),oklch(0.65 0.2 300));
}

.chm-16 .navbar-toggler {
  display: grid;
  place-items: center;
  width: 52px;
  height: 44px;
  border: 1px solid oklch(0.82 0.012 262);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: box-shadow .15s;
}

.chm-16 .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch,var(--primary) 35%,transparent);
}

.chm-16__bars {
  position: relative;
  width: 20px;
  height: 14px;
  display: block;
}

.chm-16__bars i {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: translate .28s,rotate .28s .04s,opacity .2s;
}

.chm-16__bars i:nth-child(1) {
  top: 0;
}

.chm-16__bars i:nth-child(2) {
  top: 6px;
}

.chm-16__bars i:nth-child(3) {
  top: 12px;
}

.chm-16 .navbar-toggler[aria-expanded="true"] .chm-16__bars i:nth-child(1) {
  translate: 0 6px;
  rotate: 45deg;
}

.chm-16 .navbar-toggler[aria-expanded="true"] .chm-16__bars i:nth-child(2) {
  opacity: 0;
}

.chm-16 .navbar-toggler[aria-expanded="true"] .chm-16__bars i:nth-child(3) {
  translate: 0 -6px;
  rotate: -45deg;
}

.chm-16 .navbar-collapse {
  flex-basis: 100%;
  overflow: hidden;
}

.chm-16 .navbar-collapse.collapse:not(.show) {
  display: none;
}

.chm-16 .navbar-collapse.collapsing {
  height: 0;
  transition: height .3s ease;
}

.chm-16 .navbar-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 6px 4px 10px;
}

.chm-16 .nav-link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mut);
  text-decoration: none;
  transition: color .15s,background .15s;
}

.chm-16 .nav-link:hover,
.chm-16 .nav-link:focus-visible {
  color: var(--ink);
  background: oklch(0.94 0.006 260);
}

.chm-16 .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch,var(--primary) 35%,transparent);
}

.chm-16 .nav-link.active {
  color: var(--ink);
  font-weight: 600;
}

.chm-16 .nav-link.disabled {
  color: oklch(0.72 0.008 262);
  pointer-events: none;
}

@container (min-width: 768px) {
  .chm-16 .navbar-toggler {
    display: none;
  }

  .chm-16 .navbar-collapse {
    flex-basis: auto;
  }

  .chm-16 .navbar-collapse.collapse:not(.show) {
    display: flex !important;
  }

  .chm-16 .navbar-nav {
    flex-direction: row;
    gap: 2px;
    padding: 0;
    margin-left: auto;
  }
}

.chm-16__page {
  padding: 16px;
  display: grid;
  gap: 11px;
}

.chm-16__page span {
  display: block;
  height: 10px;
  width: var(--w);
  border-radius: 99px;
  background: oklch(0.94 0.004 260);
}

.chm-16__note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--mut);
  text-wrap: pretty;
}

.chm-16__note code {
  font: 11px ui-monospace,Menlo,Consolas,monospace;
  background: oklch(0.93 0.005 260);
  border-radius: 5px;
  padding: 1.5px 6px;
}

@media (prefers-reduced-motion: reduce) {
  .chm-16 * {
    transition-duration: .01s !important;
  }
}
```

## JavaScript
```js
(function () {
  /* Stand-in for bootstrap.bundle.min.js collapse — same class dance, same timing. */
  document.querySelectorAll('.chm-16__frame').forEach(function (frame) {
    if (frame.dataset.bound) return; frame.dataset.bound = '1';
    var btn = frame.querySelector('[data-bs-toggle="collapse"]'),
        panel = frame.querySelector(btn.getAttribute('data-bs-target'));
    btn.addEventListener('click', function () {
      var opening = !panel.classList.contains('show');
      btn.setAttribute('aria-expanded', String(opening));
      panel.classList.remove('collapse');
      panel.classList.add('collapsing');
      panel.style.height = opening ? '0' : panel.scrollHeight + 'px';
      requestAnimationFrame(function () {
        panel.style.height = opening ? panel.scrollHeight + 'px' : '0';
      });
      setTimeout(function () {
        panel.classList.remove('collapsing');
        panel.classList.add('collapse');
        panel.classList.toggle('show', opening);
        panel.style.height = '';
      }, 300);
    });
  });
})();
```

How this works

Bootstrap's navbar is a contract between five classes and two data attributes:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#mainNav"
            aria-controls="mainNav" aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto"> …nav-item / nav-link… </ul>
    </div>
  </div>
</nav>

navbar-expand-lg = burger below 992px, row above (swap lg for md/sm/xl to move it). data-bs-target must be a SELECTOR (#mainNav, hash included) while aria-controls is an ID (no hash) — mixing those up is fix #1. Fix #2: the collapse div needs BOTH collapse and navbar-collapse — the first is the plugin hook, the second the responsive styling. Fix #3: the toggler does nothing without bootstrap.bundle.min.js — the bundle build, which includes Popper; the plain build silently ships no collapse plugin. Bootstrap's JS updates aria-expanded for you — it's one of the few frameworks that gets that right by default.

The default toggler is a static SVG background-image. The docs' replacement (used live in this card) swaps it for three animated bars in ~10 lines, keyed off Bootstrap's own aria-expanded state — no plugin changes.

This card renders through a scoped shim replicating the relevant 5.3 styles plus a 15-line stand-in for the collapse plugin, so the demo behaves exactly as Bootstrap's would; in your project, load real Bootstrap and delete both.

Make it yours

  • Breakpoint: navbar-expand-{sm|md|lg|xl|xxl} — one class, no CSS. No expand class at all = always-burger (fullscreen-nav sites).
  • Alignment: ms-auto on navbar-nav pushes links right; mx-auto centers them; these are just margin utilities, nothing navbar-specific.
  • Smooth height animation comes free from the collapse plugin (it measures + transitions height); set .navbar-collapse{ transition-duration:.25s } to retune it.
  • Dark navbar in 5.3: data-bs-theme="dark" on the nav — the old navbar-dark class is deprecated; the attribute also recolors the default toggler icon.

Gotchas — read before shipping

  • 'Menu opens then instantly closes' = the button is inside a form or has no type="button", so it submits/reloads. Always declare the type.
  • Two navbars on one page must target different ids — data-bs-target="#mainNav" on both means one button drives both panels (collapse is selector-based, not proximity-based).
  • Overriding navbar styles requires loading YOUR css after bootstrap.min.css and matching specificity — .navbar-nav .nav-link, not .nav-link. Half of 'my styles don't apply' is load order.
  • The collapse animation needs the panel to start closed in markup (class="collapse", not "collapse show") — starting open then removing show on load causes the first-click double-fire confusion.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), color-mix(), @container, text-wrap as this demo is written. The core technique itself goes back further — Chrome 111+.

Bootstrap 5.3 itself supports Chrome/Edge/Firefox/Safari of the last ~3 years (no IE). The shim here mirrors it with container queries + oklch for in-card rendering only.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →