Minimal Clean Classical Navbar

navbars

Sleek, minimalist modern SaaS header with fine border division and quick deploy CTA button.

#minimal#clean#classical#saas#navbar

Live Interactive Preview

Component Source Code

Select language in the dropdown

MinimalCleanNavbar.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, ArrowUpRight } from 'lucide-react';
5
6export default function MinimalCleanNavbar() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <nav className="w-full max-w-4xl mx-auto border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-950/80 backdrop-blur-md px-6 py-3.5 select-none transition-colors">
11      <div className="flex items-center justify-between">
12        <div className="flex items-center gap-2">
13          <div className="h-6 w-6 rounded-md bg-slate-900 dark:bg-white flex items-center justify-center text-white dark:text-slate-900 font-bold text-xs">
14            ▲
15          </div>
16          <span className="font-bold text-sm tracking-tight text-slate-900 dark:text-white">Aurenza</span>
17        </div>
18
19        <div className="hidden md:flex items-center gap-8 text-xs font-medium text-slate-600 dark:text-slate-400">
20          <a href="#" className="hover:text-slate-900 dark:hover:text-white transition">Overview</a>
21          <a href="#" className="hover:text-slate-900 dark:hover:text-white transition">Documentation</a>
22          <a href="#" className="hover:text-slate-900 dark:hover:text-white transition">Showcase</a>
23          <a href="#" className="hover:text-slate-900 dark:hover:text-white transition">Community</a>
24        </div>
25
26        <div className="hidden md:flex items-center gap-4">
27          <a href="#" className="text-xs font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition">
28            Sign In
29          </a>
30          <button className="rounded-lg bg-slate-900 dark:bg-white px-3.5 py-1.5 text-xs font-semibold text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-slate-100 transition cursor-pointer flex items-center gap-1">
31            Deploy <ArrowUpRight className="h-3 w-3" />
32          </button>
33        </div>
34
35        <button onClick={() => setOpen(!open)} className="md:hidden text-slate-700 dark:text-slate-300">
36          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
37        </button>
38      </div>
39
40      {open && (
41        <div className="md:hidden mt-3 pt-3 border-t border-slate-200 dark:border-slate-800 flex flex-col gap-2.5 text-xs text-slate-600 dark:text-slate-400 font-medium">
42          <a href="#" className="p-1 hover:text-slate-900 dark:hover:text-white">Overview</a>
43          <a href="#" className="p-1 hover:text-slate-900 dark:hover:text-white">Documentation</a>
44          <a href="#" className="p-1 hover:text-slate-900 dark:hover:text-white">Showcase</a>
45          <div className="pt-2 border-t border-slate-200 dark:border-slate-800 flex gap-2">
46            <button className="flex-1 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 text-center">Sign In</button>
47            <button className="flex-1 py-1.5 rounded-lg bg-slate-900 dark:bg-white text-white dark:text-slate-900 text-center font-semibold">Deploy</button>
48          </div>
49        </div>
50      )}
51    </nav>
52  );
53}

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/MinimalCleanNavbar.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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