navbar
Sidebar Pro Navbar
Live Preview
<aside class="w-64 bg-slate-900 h-full flex flex-col p-6 shadow-2xl">
<div class="text-white text-2xl font-black mb-10 px-2 tracking-tighter">NEXUS</div>
<nav class="flex-1 space-y-2">
<a href="#"
class="flex items-center gap-3 px-4 py-3 bg-indigo-600 text-white rounded-xl text-sm font-semibold shadow-lg shadow-indigo-900/50 transition-all">
<span class="w-2 h-2 rounded-full bg-white"></span> Dashboard
</a>
<a href="#"
class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-xl text-sm font-semibold transition-all">
Analytics
</a>
<a href="#"
class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-xl text-sm font-semibold transition-all">
Campaigns
</a>
</nav>
<div class="mt-auto pt-6 border-t border-slate-800 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-indigo-500 ring-2 ring-slate-800 shrink-0"></div>
<div class="text-xs truncate">
<p class="text-white font-bold">Erik V.</p>
<p class="text-slate-500">Admin</p>
</div>
</div>
</aside>
<main class="flex-1 p-10">
<!-- Content area for demonstration -->
<h1 class="text-3xl font-bold text-slate-900">Dashboard</h1>
</main>