How to build a mobile hamburger menu with JavaScript

The Hamburger Menu Pattern

At mobile widths, a horizontal nav bar does not work. The hamburger menu is the universal pattern for collapsing navigation into a toggle button.

HTML: Button + Nav

<nav class="navbar">
  <a href="#hero" class="nav-logo">Jane Doe</a>
  <button class="hamburger" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <ul class="nav-links" id="nav-menu">
    <li><a href="#projects">Projects</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

JavaScript Toggle

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('#nav-menu');

hamburger.addEventListener('click', () => {
  const isOpen = navMenu.classList.toggle('nav-open');
  hamburger.setAttribute('aria-expanded', isOpen);
});

// Close menu when a nav link is clicked
navMenu.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    navMenu.classList.remove('nav-open');
    hamburger.setAttribute('aria-expanded', 'false');
  });
});

@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-links.nav-open { display: flex; flex-direction: column; }
  .hamburger { display: block; }
}

Always update aria-expanded when toggling — screen readers use this attribute to announce the menu state. Closing the menu when a link is clicked prevents the user from having to dismiss it manually after navigating.