Luxury Editorial Serif Navbar

navbars

High-end haute couture luxury editorial navbar with wide letter-spacing, centered serif typography, and cart counter.

#luxury#editorial#serif#fashion#navbar

Live Interactive Preview

Component Source Code

Select language in the dropdown

LuxuryEditorialNavbar.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, User, ShoppingBag, Search } from 'lucide-react';
5
6export default function LuxuryEditorialNavbar() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <nav className="w-full max-w-4xl mx-auto border-y border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-950/95 px-6 py-4 select-none transition-colors">
11      <div className="flex items-center justify-between">
12        <div className="hidden md:flex items-center gap-7 text-[11px] uppercase tracking-widest font-medium text-zinc-600 dark:text-zinc-400">
13          <a href="#" className="hover:text-zinc-950 dark:hover:text-white transition">Collection</a>
14          <a href="#" className="hover:text-zinc-950 dark:hover:text-white transition">Atelier</a>
15          <a href="#" className="hover:text-zinc-950 dark:hover:text-white transition">Journal</a>
16        </div>
17
18        <div className="text-center">
19          <span className="font-serif tracking-widest text-lg sm:text-xl font-bold uppercase text-zinc-900 dark:text-zinc-100">
20            AURENZA
21          </span>
22          <span className="block text-[8px] tracking-widest text-zinc-400 uppercase">STUDIO PARIS</span>
23        </div>
24
25        <div className="hidden md:flex items-center gap-5 text-zinc-700 dark:text-zinc-300">
26          <button className="hover:text-zinc-950 dark:hover:text-white transition">
27            <Search className="h-4 w-4" />
28          </button>
29          <button className="hover:text-zinc-950 dark:hover:text-white transition">
30            <User className="h-4 w-4" />
31          </button>
32          <button className="relative hover:text-zinc-950 dark:hover:text-white transition">
33            <ShoppingBag className="h-4 w-4" />
34            <span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-rose-500" />
35          </button>
36        </div>
37
38        <button onClick={() => setOpen(!open)} className="md:hidden text-zinc-800 dark:text-zinc-200">
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-4 pt-4 border-t border-zinc-200 dark:border-zinc-800 flex flex-col gap-3 text-xs uppercase tracking-widest text-zinc-600 dark:text-zinc-400">
45          <a href="#" className="p-1 hover:text-black dark:hover:text-white">Collection</a>
46          <a href="#" className="p-1 hover:text-black dark:hover:text-white">Atelier</a>
47          <a href="#" className="p-1 hover:text-black dark:hover:text-white">Journal</a>
48          <div className="flex gap-4 pt-2 border-t border-zinc-200 dark:border-zinc-800">
49            <button className="flex items-center gap-1.5 text-xs"><User className="h-3.5 w-3.5" /> Account</button>
50            <button className="flex items-center gap-1.5 text-xs"><ShoppingBag className="h-3.5 w-3.5" /> Cart (0)</button>
51          </div>
52        </div>
53      )}
54    </nav>
55  );
56}

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

Step 4: Usage Example

ExamplePage.tsx

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