Neo-Brutalist Navbar

navbars

High-contrast bold neo-brutalist navbar with stark borders, solid drop shadows, and responsive mobile menu.

#navbar#brutalist#bold#menu#responsive

Live Interactive Preview

Component Source Code

Select language in the dropdown

BrutalNavbar.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, ArrowRight } from 'lucide-react';
5
6export default function BrutalNavbar() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <nav className="w-full max-w-4xl mx-auto border-3 border-black bg-amber-400 p-3 shadow-[6px_6px_0px_#000] font-mono text-black select-none">
11      <div className="flex items-center justify-between">
12        <div className="flex items-center gap-2">
13          <div className="h-8 w-8 bg-black text-amber-400 flex items-center justify-center font-black text-sm border-2 border-black">
14            AU
15          </div>
16          <span className="font-black text-lg tracking-tight uppercase">AURENZA_UI</span>
17        </div>
18
19        <div className="hidden md:flex items-center gap-6 font-bold text-sm">
20          <a href="#" className="hover:bg-black hover:text-white px-2 py-1 transition border-2 border-transparent hover:border-black">Manifesto</a>
21          <a href="#" className="hover:bg-black hover:text-white px-2 py-1 transition border-2 border-transparent hover:border-black">Specs</a>
22          <a href="#" className="hover:bg-black hover:text-white px-2 py-1 transition border-2 border-transparent hover:border-black">Tokens</a>
23          <a href="#" className="hover:bg-black hover:text-white px-2 py-1 transition border-2 border-transparent hover:border-black">Changelog</a>
24        </div>
25
26        <div className="hidden md:flex items-center gap-3">
27          <button className="px-3.5 py-1.5 font-bold text-xs bg-white text-black border-2 border-black shadow-[3px_3px_0px_#000] hover:translate-x-0.5 hover:translate-y-0.5 transition cursor-pointer">
28            Sign In
29          </button>
30          <button className="px-4 py-1.5 font-bold text-xs bg-black text-amber-400 border-2 border-black shadow-[3px_3px_0px_#fff] hover:translate-x-0.5 hover:translate-y-0.5 transition flex items-center gap-1 cursor-pointer">
31            Get Access <ArrowRight className="h-3.5 w-3.5" />
32          </button>
33        </div>
34
35        <button
36          onClick={() => setOpen(!open)}
37          className="md:hidden p-1.5 bg-black text-white border-2 border-black shadow-[2px_2px_0px_#fff] cursor-pointer"
38        >
39          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
40        </button>
41      </div>
42
43      {open && (
44        <div className="md:hidden mt-3 pt-3 border-t-2 border-black flex flex-col gap-2 font-bold text-sm">
45          <a href="#" className="p-2 hover:bg-black hover:text-white">Manifesto</a>
46          <a href="#" className="p-2 hover:bg-black hover:text-white">Specs</a>
47          <a href="#" className="p-2 hover:bg-black hover:text-white">Tokens</a>
48          <a href="#" className="p-2 hover:bg-black hover:text-white">Changelog</a>
49          <div className="flex gap-2 pt-2 border-t-2 border-black">
50            <button className="flex-1 py-2 bg-white text-black border-2 border-black shadow-[2px_2px_0px_#000]">Sign In</button>
51            <button className="flex-1 py-2 bg-black text-amber-400 border-2 border-black shadow-[2px_2px_0px_#000]">Get Access</button>
52          </div>
53        </div>
54      )}
55    </nav>
56  );
57}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/navbars/BrutalNavbar.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import NeoBrutalistNavbar from '@/components/navbars/BrutalNavbar';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <NeoBrutalistNavbar />
7    </main>
8  );
9}