Retro 80s Arcade Synth Navbar

navbars

Chunky 8-bit aesthetic navbar with vibrant magenta borders, neon cyan font, and Insert Coin CTA.

#retro#arcade#synthwave#8bit#navbar

Live Interactive Preview

Component Source Code

Select language in the dropdown

RetroArcadeNavbar.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X } from 'lucide-react';
5
6export default function RetroArcadeNavbar() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <nav className="w-full max-w-4xl mx-auto border-4 border-[#ff007f] bg-[#120024] p-3 font-mono text-[#00ffff] select-none shadow-[6px_6px_0px_#ff007f]">
11      <div className="flex items-center justify-between">
12        <div className="flex items-center gap-2">
13          <div className="h-8 w-8 bg-[#ff007f] text-white flex items-center justify-center font-black text-sm shadow-[2px_2px_0px_#00ffff]">
14            8B
15          </div>
16          <span className="font-black text-sm tracking-widest text-[#ffe600] uppercase">
17            ARCADE_UI
18          </span>
19        </div>
20
21        <div className="hidden md:flex items-center gap-6 text-xs font-bold">
22          <a href="#" className="hover:text-[#ffe600] hover:underline underline-offset-4 transition">[GAMES]</a>
23          <a href="#" className="hover:text-[#ffe600] hover:underline underline-offset-4 transition">[HIGH_SCORES]</a>
24          <a href="#" className="hover:text-[#ffe600] hover:underline underline-offset-4 transition">[CARTRIDGES]</a>
25          <a href="#" className="hover:text-[#ffe600] hover:underline underline-offset-4 transition">[DEV_API]</a>
26        </div>
27
28        <div className="hidden md:flex items-center gap-3">
29          <button className="px-3 py-1 bg-[#00ffff] text-black font-black text-xs border-2 border-black shadow-[3px_3px_0px_#ff007f] hover:translate-x-0.5 hover:translate-y-0.5 transition cursor-pointer">
30            INSERT COIN
31          </button>
32        </div>
33
34        <button onClick={() => setOpen(!open)} className="md:hidden text-[#00ffff]">
35          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
36        </button>
37      </div>
38
39      {open && (
40        <div className="md:hidden mt-3 pt-3 border-t-2 border-[#ff007f] flex flex-col gap-2 text-xs font-bold">
41          <a href="#" className="p-1 hover:text-[#ffe600]">[GAMES]</a>
42          <a href="#" className="p-1 hover:text-[#ffe600]">[HIGH_SCORES]</a>
43          <a href="#" className="p-1 hover:text-[#ffe600]">[CARTRIDGES]</a>
44          <div className="pt-2 border-t-2 border-[#ff007f]">
45            <button className="w-full py-1.5 bg-[#00ffff] text-black font-black text-xs">
46              INSERT COIN
47            </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/RetroArcadeNavbar.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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