Minimalist Style Navbar Template

This minimalist navbar is mobile-responsive and accessible. Copy and paste the code straight into your own web projects.

Screenshot of minimalist navbar template

Get Source Code Preview

Visual Features

Features of this navbar include clean lines, ample whitespace, and a simple sans-serif font. Links have a subtle bottom border on hover. No flashy animations.

Code Features

Single File: All HTML, CSS, and necessary JavaScript are contained within one file for easy copy-pasting.
Mobile-First & Responsive: The design works perfectly on small screens and gracefully expands to a traditional horizontal layout on larger screens.
Accessible (WCAG 2.1 AA Compliant):
- Uses semantic HTML5 elements (<header>, <nav>, <button>).
- The mobile menu toggle button uses aria-controls, aria-expanded, and aria-label for screen reader users.
- Keyboard navigation is seamless, with logical tab order.
- Visible focus states (:focus-visible) are provided for keyboard users, which don't trigger on mouse clicks.
- Color contrast ratios for text on background meet AA standards.
Best Practices:
- CSS custom properties (variables) are used for easy theme customization (colors, fonts).
- The code is heavily 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 (superior to the older "checkbox hack").
Minimalist Aesthetic: Clean, with generous whitespace, a modern sans-serif font stack, and subtle, non-distracting hover effects.

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>Minimalist Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Variables)
        ========================================
        Using variables makes it easy to customize the navbar's theme.
        */
        :root {
            --color-background: #ffffff; /* White background for a clean look */
            --color-foreground: #f8f9fa; /* A very light grey for subtle distinction if needed */
            --color-text: #333333;       /* Dark grey for readable text, high contrast */
            --color-primary: #007bff;     /* A standard, accessible blue for CTAs */
            --color-primary-hover: #0056b3;/* A darker blue for hover/focus states */
            --color-border-subtle: #e9ecef;/* Subtle border color */
            
            --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --font-weight-normal: 400;
            --font-weight-bold: 700;

--navbar-height: 70px;
            --navbar-padding: 1rem;
            --container-width: 1140px;

--transition-speed: 0.2s;
        }

/*
        ========================================
        Global Resets & Base Styles
        ========================================
        */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

body {
            margin: 0;
            font-family: var(--font-family-sans-serif);
            font-size: 1rem;
            font-weight: var(--font-weight-normal);
            line-height: 1.5;
            color: var(--color-text);
            background-color: var(--color-background);
        }

/* Add some placeholder content to demonstrate scrolling */
        body::after {
            content: 'Scroll down to see the navbar is not sticky by default.';
            display: block;
            text-align: center;
            height: 200vh;
            padding-top: 5rem;
            color: #aaa;
        }
        
        /* Remove default list styles */
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

/* Basic link styling */
        a {
            text-decoration: none;
            color: var(--color-text);
        }

/*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            height: var(--navbar-height);
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--color-border-subtle);
        }

.navbar__container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: var(--container-width);
            margin: 0 auto;
            padding: 0 var(--navbar-padding);
        }
        
        .navbar__brand {
            font-size: 1.5rem;
            font-weight: var(--font-weight-bold);
        }

/*
        ========================================
        Mobile Menu & Hamburger Toggle
        ========================================
        This is the mobile-first approach.
        */
        .navbar__toggle {
            display: block; /* Shown on mobile */
            padding: 0.5rem;
            border: none;
            background: transparent;
            cursor: pointer;
            z-index: 1001; /* Ensure it's on top of menu */
        }

/* Hamburger icon lines */
        .navbar__toggle .bar {
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px auto;
            background-color: var(--color-text);
            transition: all var(--transition-speed) ease-in-out;
        }
        
        /* Hamburger animation to 'X' when active */
        .navbar__toggle.is-active .bar:nth-child(2) {
            opacity: 0;
        }
        .navbar__toggle.is-active .bar:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        .navbar__toggle.is-active .bar:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
        
        .navbar__menu {
            display: none; /* Hidden by default on mobile */
            flex-direction: column;
            width: 100%;
            position: absolute;
            top: var(--navbar-height);
            left: 0;
            background-color: var(--color-background);
            border-bottom: 1px solid var(--color-border-subtle);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            z-index: 1000;
        }
        
        /* Show the menu when the .is-active class is present */
        .navbar__menu.is-active {
            display: flex;
        }

.navbar__item {
            text-align: center;
            border-bottom: 1px solid var(--color-border-subtle);
        }
        .navbar__item:last-child {
            border-bottom: none;
        }

.navbar__link {
            display: block;
            padding: 1.5rem;
            transition: background-color var(--transition-speed) ease;
        }
        
        .navbar__link:hover,
        .navbar__link:focus {
            background-color: var(--color-foreground);
        }
        
        /* Call to Action (CTA) Button - Mobile */
        .navbar__link--cta {
            color: var(--color-primary);
            font-weight: var(--font-weight-bold);
        }

/* Use :focus-visible for a better accessibility experience. 
           This outline only shows for keyboard users, not mouse clicks. */
        :is(.navbar__toggle, .navbar__link):focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
            border-radius: 2px;
        }

/*
        ========================================
        Desktop Navbar Styles (Responsive)
        ========================================
        Media query for screens 768px and wider.
        */
        @media (min-width: 768px) {
            .navbar__toggle {
                display: none; /* Hide the hamburger on desktop */
            }

.navbar__menu {
                /* These properties are correct for the <nav> container */
                display: flex; 
                align-items: center;
                position: static;
                width: auto;
                background-color: transparent;
                border: none;
                box-shadow: none;
            }

.navbar__list {
                /* This makes the list items (<li>) arrange in a row */
                display: flex;
                align-items: center;
            }

.navbar__item {
                /* Styles for individual list items are fine */
                border: none;
                margin-left: 0.5rem; /* Space between links */
            }
            
            .navbar__link {
                /* Adjusted styles for a horizontal layout */
                padding: 0.5rem 1rem;
                border-radius: 4px;
                /* Add a subtle bottom border for a clean underline effect */
                border-bottom: 2px solid transparent; 
            }

/* The classic "border on hover" effect */
            .navbar__link:not(.navbar__link--cta):hover,
            .navbar__link:not(.navbar__link--cta):focus {
                background-color: transparent; /* Override mobile hover */
                border-bottom-color: var(--color-primary);
                color: var(--color-text); /* Ensure text color remains consistent */
            }
            
            /* CTA Button Styling for Desktop */
            .navbar__item--cta {
                margin-left: 1.5rem;
            }
            
            .navbar__link--cta {
                color: #fff; /* White text on colored background */
                background-color: var(--color-primary);
                padding: 0.75rem 1.5rem; /* Make it more prominent */
                transition: background-color var(--transition-speed) ease;
                border-bottom: none; /* The CTA button doesn't need the bottom border */
            }

/* CTA hover effect */
            .navbar__link--cta:hover,
            .navbar__link--cta:focus {
                background-color: var(--color-primary-hover);
                border-bottom: none; /* Ensure no border on hover either */
            }
        }

</style>
</head>
<body>

<header class="navbar" role="banner">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">BrandName</a>
            
            
            <button class="navbar__toggle" 
                    id="navbarToggle" 
                    aria-label="Toggle navigation" 
                    aria-controls="navbarMenu" 
                    aria-expanded="false">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
            
            <nav id="navbarMenu" class="navbar__menu" role="navigation" aria-labelledby="navbarToggle">
                <ul class="navbar__list">
                    <li class="navbar__item"><a href="#" class="navbar__link">Features</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Pricing</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">About</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Contact</a></li>
                    <li class="navbar__item navbar__item--cta">
                        <a href="#" class="navbar__link navbar__link--cta">Sign Up</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    
    <script>
        // A small, accessible script to toggle the mobile menu.
        document.addEventListener('DOMContentLoaded', function () {
            const navbarToggle = document.getElementById('navbarToggle');
            const navbarMenu = document.getElementById('navbarMenu');

if (navbarToggle && navbarMenu) {
                navbarToggle.addEventListener('click', function () {
                    // Toggle the .is-active class on both the toggle and the menu
                    navbarToggle.classList.toggle('is-active');
                    navbarMenu.classList.toggle('is-active');

// Update the aria-expanded attribute
                    const isExpanded = navbarToggle.getAttribute('aria-expanded') === 'true';
                    navbarToggle.setAttribute('aria-expanded', !isExpanded);
                });
            }
        });
    </script>
</body>
</html>

View Output