Enterprise SaaS Dashboard Navbar

navbars

Multi-tenant enterprise dashboard header with project selector, health metrics, and user avatar initials.

#enterprise#saas#dashboard#metrics#navbar

Live Interactive Preview

Component Source Code

Select language in the dropdown

EnterpriseAppNavbar.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, LayoutDashboard, Database, Activity, ShieldCheck } from 'lucide-react';
5
6export default function EnterpriseAppNavbar() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <nav className="w-full max-w-4xl mx-auto rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-5 py-3 shadow-md select-none transition-colors">
11      <div className="flex items-center justify-between">
12        <div className="flex items-center gap-3">
13          <div className="h-8 w-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold text-xs">
14            <LayoutDashboard className="h-4 w-4" />
15          </div>
16          <div className="flex items-center gap-1.5 text-xs font-semibold">
17            <span className="text-slate-900 dark:text-white">Aurenza Corp</span>
18            <span className="text-slate-400">/</span>
19            <span className="text-blue-600 dark:text-blue-400 font-bold">Production API</span>
20          </div>
21        </div>
22
23        <div className="hidden md:flex items-center gap-6 text-xs font-medium text-slate-600 dark:text-slate-400">
24          <a href="#" className="flex items-center gap-1.5 hover:text-slate-900 dark:hover:text-white">
25            <Activity className="h-3.5 w-3.5 text-emerald-500" /> Metrics
26          </a>
27          <a href="#" className="flex items-center gap-1.5 hover:text-slate-900 dark:hover:text-white">
28            <Database className="h-3.5 w-3.5 text-blue-500" /> Clusters
29          </a>
30          <a href="#" className="flex items-center gap-1.5 hover:text-slate-900 dark:hover:text-white">
31            <ShieldCheck className="h-3.5 w-3.5 text-purple-500" /> Security
32          </a>
33        </div>
34
35        <div className="hidden md:flex items-center gap-3">
36          <span className="rounded-full bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-0.5 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400">
37            99.99% Uptime
38          </span>
39          <div className="h-8 w-8 rounded-full bg-gradient-to-tr from-slate-700 to-slate-900 flex items-center justify-center text-white text-xs font-bold ring-2 ring-blue-500/40 cursor-pointer">
40            JD
41          </div>
42        </div>
43
44        <button onClick={() => setOpen(!open)} className="md:hidden text-slate-600 dark:text-slate-300">
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-slate-200 dark:border-slate-800 flex flex-col gap-2 text-xs text-slate-600 dark:text-slate-300">
51          <a href="#" className="flex items-center gap-2 p-1.5 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg">
52            <Activity className="h-3.5 w-3.5 text-emerald-500" /> Metrics
53          </a>
54          <a href="#" className="flex items-center gap-2 p-1.5 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg">
55            <Database className="h-3.5 w-3.5 text-blue-500" /> Clusters
56          </a>
57          <a href="#" className="flex items-center gap-2 p-1.5 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg">
58            <ShieldCheck className="h-3.5 w-3.5 text-purple-500" /> Security
59          </a>
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/EnterpriseAppNavbar.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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