Classic Hamburger to Dropdown Navbar Template

The quintessential responsive navbar that switches to a hamburger menu on smaller devices.

On desktop, it's a standard horizontal navbar. On mobile, links hide behind a hamburger icon that toggles a simple vertical dropdown menu.

Get Source Code → Preview →

The Classic Hamburger-to-Dropdown

The quintessential responsive navigation pattern. On larger desktop screens, it displays as a standard horizontal bar of links. On smaller mobile screens, the links gracefully hide behind a "hamburger" icon, which toggles a clean, vertical dropdown menu. This is the most common and user-friendly approach for responsive websites.

Seamless Responsive Transition — The layout fluidly transforms from horizontal to vertical at a specific breakpoint. The hamburger toggle button is only visible on mobile, and the horizontal link list is only visible on desktop.
Clean Mobile-First CSS — The CSS is written with a "mobile-first" methodology. The base styles are for the mobile (dropdown) view, and a min-width media query then adds the styles for the desktop (horizontal) view. This is a modern best practice for maintainable CSS.
Accessible by Default: The toggle button is a proper <button> element with the necessary ARIA attributes (aria-controls, aria-expanded) that are dynamically updated by JavaScript to ensure screen readers understand the menu's state.
Lightweight & Universal: Built with a minimal amount of HTML, CSS, and JavaScript, making it incredibly easy to integrate and customize for any project.

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is appropriately commented to explain the purpose of each section.
A tiny, efficient JavaScript snippet is used for the mobile menu toggle, as it is the most accessible and modern method (arguably superior to the older "checkbox hack").

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classic Hamburger-to-Dropdown Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Universal Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #111827;
            --color-text-secondary: #6b7280;
            --color-primary-accent: #3b82f6;
            --color-border: #e5e7eb;

--font-family-sans-serif: ui-sans-serif, system-ui, -apple-system, sans-serif;
            --navbar-height: 70px;
            --container-width: 1280px;
            --transition-speed: 0.2s;
            --border-radius: 0.375rem;
        }

/*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); line-height: 1.6; background-color: #f9fafb; }
        .content { height: 200vh; max-width: var(--container-width); margin: 0 auto; padding: calc(var(--navbar-height) + 2rem) 1.5rem; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; transition: color var(--transition-speed) ease; }

/*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            position: sticky; top: 0; z-index: 1000;
            height: var(--navbar-height); display: flex; align-items: center;
            background-color: var(--color-background); border-bottom: 1px solid var(--color-border);
        }
        
        .navbar__container {
            display: flex; align-items: center; justify-content: space-between;
            width: 100%; max-width: var(--container-width);
            margin: 0 auto; padding: 0 1.5rem;
        }

.navbar__brand {
            font-size: 1.5rem; font-weight: 600; color: var(--color-text-primary);
        }

/*
        ========================================
        Mobile Navigation (Mobile-First Styles)
        ========================================
        */
        
        /* The Hamburger Toggle Button */
        .navbar__toggle {
            display: block; /* Shown by default on mobile */
            border: none; background: transparent; cursor: pointer; padding: 0.5rem;
        }
        .navbar__toggle .bar {
            display: block; width: 25px; height: 3px; margin: 5px auto;
            background-color: var(--color-text-primary); border-radius: 1px;
            transition: all var(--transition-speed) ease-in-out;
        }
        .navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
        
        /* The Dropdown Menu */
        .navbar__menu {
            display: none; /* Hidden by default */
            position: fixed;
            top: var(--navbar-height); left: 0;
            width: 100%;
            background-color: var(--color-background);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            z-index: 999;
        }
        .navbar__menu.is-active { display: block; }
        .navbar__item:not(:last-child) { border-bottom: 1px solid var(--color-border); }

.navbar__link {
            display: block; padding: 1rem 1.5rem; font-weight: 500;
            color: var(--color-text-secondary);
        }
        .navbar__link:hover, .navbar__link:focus { color: var(--color-primary-accent); }
        
        :is(.navbar__toggle, .navbar__link):focus-visible { outline: 2px solid var(--color-primary-accent); outline-offset: 2px; }
        
        /*
        ========================================
        Desktop Navigation Styles
        ========================================
        */
        @media (min-width: 768px) {
            .navbar__toggle {
                display: none; /* Hide hamburger on desktop */
            }

.navbar__menu {
                /* Reset mobile styles and show it horizontally */
                display: flex;
                position: static;
                width: auto;
                background: none;
                box-shadow: none;
            }

.navbar__list {
                display: flex;
                align-items: center;
                gap: 2rem;
            }

.navbar__item:not(:last-child) {
                border-bottom: none; /* Remove mobile border */
            }

.navbar__link {
                padding: 0.5rem; /* Adjust padding for horizontal layout */
            }
        }

</style>
</head>
<body>
    <header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">WebStandard</a>
            
            <button class="navbar__toggle" id="navbarToggle" aria-label="Toggle navigation menu" aria-controls="navbarMenu" aria-expanded="false">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
            
            <nav class="navbar__menu" id="navbarMenu">
                <ul class="navbar__list">
                    <li class="navbar__item"><a href="#" class="navbar__link">Home</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">About</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Services</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main class="content">
        <h1>Classic Hamburger-to-Dropdown</h1>
        <p>This is the standard responsive navigation pattern. Resize your browser window to see it switch between the horizontal desktop menu and the mobile hamburger menu.</p>
    </main>
    
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const navbarToggle = document.getElementById('navbarToggle');
        const navbarMenu = document.getElementById('navbarMenu');

if (navbarToggle && navbarMenu) {
            navbarToggle.addEventListener('click', function () {
                navbarMenu.classList.toggle('is-active');
                
                const isExpanded = navbarMenu.classList.contains('is-active');
                navbarToggle.setAttribute('aria-expanded', isExpanded);
            });
        }
    });
    </script>
</body>
</html>

View Output