Brutalist Style Navbar Template

The "Bold and Brutalist" navbar is a website navbar done in a brutalist style. It's mobile-responsive and accessible. Copy and paste the code straight into your own web projects.

Screenshot of bold and brutalist navbar template

Get Source Code Preview

Features

This navbar captures the brutalist aesthetic with its high-contrast, sharp-edged, and unrefined style. It's intentionally stark and functional, rejecting soft gradients and shadows in favor of raw, blocky elements.

Aesthetic: Blocky elements and sharp corners. Pure black and white for maximum contrast, with a single, vibrant accent color (yellow) for interaction. No gradients or shadows.
Typography: A monospace font stack is used to give it a raw, "code-like" feel.
Design Elements: All border-radius is set to zero for sharp corners. Thick, solid borders are used to create a blocky, contained look.
Hover/Focus Effects: Instead of subtle fades, it uses a stark inversion effect (background and text colors swap) for immediate and clear feedback.
Accessibility: Fully accessible with semantic HTML, ARIA attributes for the mobile toggle, high-contrast colors, and distinct :focus-visible states for keyboard users.
Structure: Uses a robust, mobile-first HTML, CSS, and JavaScript foundation.

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>Bold & Brutalist Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Brutalist Theme)
        ========================================
        The theme is defined by high contrast, a raw monospace font,
        a single accent color, and a thick border style.
        */
        :root {
            --color-background: #ffffff;
            --color-foreground: #000000;
            --color-accent: #ffff00;   /* A classic, vibrant web yellow */

--font-family-mono: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
            --font-weight-bold: 700;
            
            --border-width: 3px;
            --border-style: var(--border-width) solid var(--color-foreground);

--navbar-height: 80px;
            --navbar-padding: 1rem;
            --container-width: 1140px;
            --transition-speed: 0.15s;
        }

/*
        ========================================
        Global Resets & Brutalist Base Styles
        ========================================
        */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            border-radius: 0; /* A core tenet of this style: no rounded corners. */
        }

body {
            margin: 0;
            font-family: var(--font-family-mono);
            font-size: 1rem;
            line-height: 1.5;
            color: var(--color-foreground);
            background-color: var(--color-background);
            /* Set the colors explicitly for a true inversion effect later */
        }

/* Add some placeholder content */
        body::after {
            content: 'Scroll down. This is a standard navbar. Note the hard borders and lack of shadows, which are characteristic of brutalist web design.';
            display: block;
            text-align: center;
            height: 200vh;
            padding-top: 5rem;
            color: #777;
        }
        
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: inherit; } /* Links inherit color */

/*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            height: var(--navbar-height);
            display: flex;
            align-items: center;
            border-bottom: var(--border-style);
            background-color: var(--color-background); /* Explicitly set for hover effects */
        }

.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);
            text-transform: uppercase;
            padding: 0.5rem;
            border: var(--border-style);
            color: var(--color-foreground);
        }

/*
        ========================================
        Mobile Menu & Hamburger Toggle
        ========================================
        */
        .navbar__toggle {
            padding: 0.5rem;
            border: var(--border-style);
            background: transparent;
            cursor: pointer;
            z-index: 1001; 
        }

.navbar__toggle .bar {
            display: block;
            width: 25px;
            height: var(--border-width); /* Match border thickness */
            margin: 5px auto;
            background-color: var(--color-foreground);
            transition: all var(--transition-speed) ease-in-out;
        }
        
        /* 'X' animation */
        .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;
            flex-direction: column;
            width: 100%;
            position: absolute;
            top: calc(var(--navbar-height) + var(--border-width));
            left: 0;
            background-color: var(--color-background);
            border-bottom: var(--border-style);
            z-index: 1000;
        }
        
        .navbar__menu.is-active { display: flex; }

.navbar__item {
            text-align: center;
            border-top: var(--border-style); /* Create harsh separators */
        }

.navbar__link {
            display: block;
            padding: 1.5rem;
            font-weight: var(--font-weight-bold);
            text-transform: uppercase;
            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
        }
        
        /* On mobile, invert the colors for a stark hover effect */
        .navbar__link:hover,
        .navbar__link:focus {
            background-color: var(--color-foreground);
            color: var(--color-background);
        }
        
        .navbar__link--cta {
             /* In mobile, CTA is styled like other links but hover uses accent color */
        }

.navbar__link--cta:hover,
        .navbar__link--cta:focus {
            background-color: var(--color-accent);
            color: var(--color-foreground);
        }

/* A highly visible focus ring that fits the brutalist theme */
        :is(.navbar__toggle, .navbar__link):focus-visible {
            outline: var(--border-width) solid var(--color-accent);
            outline-offset: 3px;
        }

/*
        ========================================
        Desktop Navbar Styles (Responsive)
        ========================================
        */
        @media (min-width: 768px) {
            .navbar__toggle {
                display: none;
            }

.navbar__menu {
                display: flex;
                flex-direction: row;
                align-items: stretch; /* Make items full height */
                position: static;
                width: auto;
                background-color: transparent;
                border: none;
            }

.navbar__list {
                display: flex;
                align-items: stretch; /* Make items full height */
            }

.navbar__item {
                border-top: none;
                border-left: var(--border-style);
            }

.navbar__link {
                display: flex;
                align-items: center;
                height: 100%;
                padding: 0 1.5rem;
            }

/* Main link hover effect: color inversion */
            .navbar__link:not(.navbar__link--cta):hover,
            .navbar__link:not(.navbar__link--cta):focus {
                background-color: var(--color-foreground);
                color: var(--color-background);
            }
            
            /* CTA Button Styling for Desktop */
            .navbar__link--cta {
                background-color: var(--color-accent);
                color: var(--color-foreground);
            }
            
            /* CTA hover effect: black background with yellow text */
            .navbar__link--cta:hover,
            .navbar__link--cta:focus {
                background-color: var(--color-foreground);
                color: var(--color-accent);
            }
        }
    </style>
</head>
<body>

<header class="navbar" role="banner">
        <div class="navbar__container">
            <a href="#" class="navbar__brand" aria-label="Homepage">Brand</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">Services</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Projects</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Journal</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">Get Quote</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 () {
                    navbarToggle.classList.toggle('is-active');
                    navbarMenu.classList.toggle('is-active');
                    const isExpanded = navbarToggle.getAttribute('aria-expanded') === 'true';
                    navbarToggle.setAttribute('aria-expanded', !isExpanded);
                });
            }
        });
    </script>
</body>
</html>

View Output