Cyberpunk Telemetry Navbar

navbars

Futuristic sci-fi terminal navbar with live node status indicator, corner bracket accents, and monospace styling.

#cyberpunk#terminal#telemetry#scifi#navbar

Live Interactive Preview

Component Source Code

Select language in the dropdown

CyberTelemetryNavbar.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, Terminal, User } from 'lucide-react';
5
6export default function CyberTelemetryNavbar() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <nav className="w-full max-w-4xl mx-auto border-y sm:border-2 border-cyan-500/40 bg-slate-950 px-4 sm:px-6 py-3 font-mono text-cyan-400 select-none shadow-[0_0_30px_rgba(6,182,212,0.15)] relative">
11      <div className="hidden sm:block absolute -top-1 -left-1 h-2 w-2 bg-cyan-400 shadow-[0_0_8px_#22d3ee]" />
12      <div className="hidden sm:block absolute -top-1 -right-1 h-2 w-2 bg-cyan-400 shadow-[0_0_8px_#22d3ee]" />
13      <div className="hidden sm:block absolute -bottom-1 -left-1 h-2 w-2 bg-cyan-400 shadow-[0_0_8px_#22d3ee]" />
14      <div className="hidden sm:block absolute -bottom-1 -right-1 h-2 w-2 bg-cyan-400 shadow-[0_0_8px_#22d3ee]" />
15
16      <div className="flex items-center justify-between">
17        <div className="flex items-center gap-2">
18          <Terminal className="h-4 w-4 text-cyan-400 animate-pulse" />
19          <span className="font-black text-sm tracking-widest uppercase text-white">
20            CYBER<span className="text-cyan-400">_OPS</span>
21          </span>
22          <span className="hidden sm:inline-flex items-center gap-1 rounded bg-cyan-950/80 border border-cyan-500/30 px-1.5 py-0.5 text-[9px] text-cyan-300">
23            v2.4.0
24          </span>
25        </div>
26
27        <div className="hidden md:flex items-center gap-6 text-xs text-slate-300">
28          <a href="#" className="hover:text-cyan-400 hover:drop-shadow-[0_0_6px_#22d3ee] transition">[//SYSTEM]</a>
29          <a href="#" className="hover:text-cyan-400 hover:drop-shadow-[0_0_6px_#22d3ee] transition">[//TELEMETRY]</a>
30          <a href="#" className="hover:text-cyan-400 hover:drop-shadow-[0_0_6px_#22d3ee] transition">[//NODES]</a>
31          <a href="#" className="hover:text-cyan-400 hover:drop-shadow-[0_0_6px_#22d3ee] transition">[//ENCRYPTION]</a>
32        </div>
33
34        <div className="hidden md:flex items-center gap-3">
35          <div className="flex items-center gap-1.5 rounded-md bg-slate-900 border border-slate-800 px-2.5 py-1 text-[11px] text-emerald-400">
36            <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-ping" />
37            <span>ONLINE</span>
38          </div>
39          <button className="flex items-center gap-1 bg-cyan-500 text-slate-950 font-bold px-3 py-1 text-xs rounded hover:bg-cyan-400 transition cursor-pointer shadow-[0_0_12px_rgba(6,182,212,0.4)]">
40            <User className="h-3 w-3" /> AUTH
41          </button>
42        </div>
43
44        <button onClick={() => setOpen(!open)} className="md:hidden p-1 text-cyan-400 hover:text-white">
45          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
46        </button>
47      </div>
48
49      {open && (
50        <div className="md:hidden mt-3 pt-3 border-t border-cyan-500/30 flex flex-col gap-2 text-xs text-slate-300">
51          <a href="#" className="p-1 hover:text-cyan-400">[//SYSTEM]</a>
52          <a href="#" className="p-1 hover:text-cyan-400">[//TELEMETRY]</a>
53          <a href="#" className="p-1 hover:text-cyan-400">[//NODES]</a>
54          <a href="#" className="p-1 hover:text-cyan-400">[//ENCRYPTION]</a>
55          <div className="pt-2 border-t border-cyan-500/30 flex gap-2">
56            <button className="flex-1 py-1.5 bg-cyan-500 text-slate-950 font-bold text-xs rounded text-center">
57              AUTH USER
58            </button>
59          </div>
60        </div>
61      )}
62    </nav>
63  );
64}

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

Step 4: Usage Example

ExamplePage.tsx

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