Responsive Navbar Tutorial: Build a Mobile Hamburger Menu With HTML, CSS and JavaScript

Navigation is one of the most-used parts of any website, and on phones it usually becomes a "hamburger" menu. Here's how to build a responsive navbar that's accessible, lightweight and easy to customise.

HTML

<header class="nav">
  <a href="/" class="logo">Joboo<span>Web</span></a>
  <button class="nav-toggle" aria-expanded="false" aria-controls="menu" aria-label="Open menu">
    <span></span><span></span><span></span>
  </button>
  <nav id="menu" class="nav-menu">
    <a href="/services">Services</a>
    <a href="/blog/">Blog</a>
    <a href="/about-us">About</a>
    <a href="/contact" class="nav-cta">Get a quote</a>
  </nav>
</header>

CSS

.nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; position: sticky; top: 0; background: #fff; z-index: 50; }
.nav-menu { display: flex; gap: 20px; align-items: center; }
.nav-menu a { text-decoration: none; color: #1a1f36; font-weight: 600; }
.nav-cta { background: #1B6FD8; color: #fff !important; padding: 10px 16px; border-radius: 10px; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #1a1f36; margin: 5px 0; transition: .2s; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,.08);
    display: none;
  }
  .nav-menu a { padding: 14px 16px; border-top: 1px solid #eef1f7; }
  .nav.open .nav-menu { display: flex; }
}

JavaScript

const nav = document.querySelector(".nav");
const toggle = document.querySelector(".nav-toggle");
toggle.addEventListener("click", () => {
  const open = nav.classList.toggle("open");
  toggle.setAttribute("aria-expanded", open);
  toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
});
document.addEventListener("keydown", e => {
  if (e.key === "Escape" && nav.classList.contains("open")) toggle.click();
});

Accessibility checklist

• Use a real <button> for the toggle
• aria-expanded and aria-controls tell screen readers the menu state
• Escape key closes the menu
• Visible focus styles for keyboard users
• Tap targets at least about 44 px tall

See website accessibility basics.

UX tips for business sites

• Keep 5–7 top-level items
• Put the main CTA (Call/WhatsApp/Quote) visibly in the menu
• Consider a sticky header with a click-to-call button on mobile
• Use clear labels customers understand. See navigation menus that help

SEO note

Use real <a href> links in the HTML so search engines can crawl them, even when the mobile menu is hidden. See JavaScript SEO.

FAQs

Should I use Bootstrap's navbar instead?

Bootstrap's navbar works well if you already use Bootstrap. See Bootstrap 5 tutorial.

How do I add dropdowns?

Use nested lists with buttons that toggle submenus, following the same ARIA pattern.

Joboo Web builds fast, accessible navigation for every site. Get in touch.