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>

Related components

More items from the merged UI library.

View all