Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Sidebar With Active Menu Item</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex min-h-screen" x-data="{ activeLink: 'analytics' }"> <aside class="w-64 bg-white border-r border-gray-100 flex flex-col shadow-sm"> <div class="p-8"> <div class="h-10 w-10 bg-rose-500 rounded-full flex items-center justify-center text-white font-bold ring-4 ring-rose-50">S</div> </div> <nav class="flex-1 px-4 space-y-2"> <button @click="activeLink = 'home'" :class="activeLink === 'home' ? 'bg-rose-50 text-rose-600 font-bold' : 'text-gray-500 hover:bg-gray-50'" class="w-full text-left px-5 py-3 rounded-xl transition-all duration-200" > Home </button> <button @click="activeLink = 'analytics'" :class="activeLink === 'analytics' ? 'bg-rose-50 text-rose-600 font-bold' : 'text-gray-500 hover:bg-gray-50'" class="w-full text-left px-5 py-3 rounded-xl transition-all duration-200" > Analytics </button> <button @click="activeLink = 'billing'" :class="activeLink === 'billing' ? 'bg-rose-50 text-rose-600 font-bold' : 'text-gray-500 hover:bg-gray-50'" class="w-full text-left px-5 py-3 rounded-xl transition-all duration-200" > Billing </button> <button @click="activeLink = 'security'" :class="activeLink === 'security' ? 'bg-rose-50 text-rose-600 font-bold' : 'text-gray-500 hover:bg-gray-50'" class="w-full text-left px-5 py-3 rounded-xl transition-all duration-200" > Security </button> </nav> </aside> <main class="flex-1 p-16"> <h1 class="text-4xl font-black text-gray-800">Clear States</h1> <p class="mt-4 text-gray-500 text-lg">Active menu items provide the user with immediate context about their current location within the site hierarchy.</p> </main> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
