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 Navbar With Sidebar Toggle</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-100 h-screen overflow-hidden flex"> <div x-data="{ sidebarOpen: true }"> <!-- Navbar --> <nav class="fixed top-0 z-40 w-full bg-white border-b border-gray-200"> <div class="px-4 h-16 flex items-center justify-between"> <div class="flex items-center"> <button @click="sidebarOpen = !sidebarOpen" class="p-2 mr-4 text-gray-600 rounded-lg hover:bg-gray-100 focus:outline-none"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg> </button> <span class="text-xl font-bold text-gray-800">AdminPanel</span> </div> <div class="flex items-center space-x-4"> <button class="text-sm font-medium text-gray-500 hover:text-gray-700">Support</button> <div class="w-8 h-8 rounded-full bg-blue-500"></div> </div> </div> </nav> <div class="flex pt-16 h-full"> <!-- Sidebar --> <aside class="bg-white border-r border-gray-200 transition-all duration-300 overflow-hidden" :class="sidebarOpen ? 'w-64' : 'w-0'" > <div class="p-4 space-y-2"> <a href="##" class="block p-3 rounded-lg bg-blue-50 text-blue-700 font-bold">Dashboard</a> <a href="##" class="block p-3 rounded-lg text-gray-600 hover:bg-gray-50">Analytics</a> <a href="##" class="block p-3 rounded-lg text-gray-600 hover:bg-gray-50">Settings</a> <a href="##" class="block p-3 rounded-lg text-gray-600 hover:bg-gray-50">Help</a> </div> </aside> <!-- Main Content --> <main class="flex-1 p-8 overflow-y-auto bg-gray-50"> <h1 class="text-3xl font-bold text-gray-900 mb-6">Dashboard Overview</h1> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="h-32 bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-center justify-center italic text-gray-400">Card 1</div> <div class="h-32 bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-center justify-center italic text-gray-400">Card 2</div> <div class="h-32 bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-center justify-center italic text-gray-400">Card 3</div> </div> <p class="mt-8 text-gray-500 leading-relaxed">Try toggling the sidebar using the hamburger icon in the navbar. This pattern is essential for data-rich applications and admin dashboards.</p> </main> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
