Back to Discover
Tailwind CSS Sidebar Menu Examples

Amelia
Created Nov 03, 2025
182 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50">
  <div x-data="{ currentExample: 1 }" class="min-h-screen">

    <!-- Example Selector -->
    <div class="bg-white shadow-sm border-b sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 py-4">
        <h1 class="text-2xl font-bold text-gray-800 mb-4">5 Sidebar Menu Examples</h1>
        <div class="flex flex-wrap gap-2">
          <button @click="currentExample = 1" :class="currentExample === 1 ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'" class="px-4 py-2 rounded-lg font-medium transition-colors">
            1. Dark Modern
          </button>
          <button @click="currentExample = 2" :class="currentExample === 2 ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'" class="px-4 py-2 rounded-lg font-medium transition-colors">
            2. Light Minimal
          </button>
          <button @click="currentExample = 3" :class="currentExample === 3 ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'" class="px-4 py-2 rounded-lg font-medium transition-colors">
            3. Gradient Accent
          </button>
          <button @click="currentExample = 4" :class="currentExample === 4 ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'" class="px-4 py-2 rounded-lg font-medium transition-colors">
            4. Icon Only
          </button>
          <button @click="currentExample = 5" :class="currentExample === 5 ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'" class="px-4 py-2 rounded-lg font-medium transition-colors">
            5. Floating Cards
          </button>
        </div>
      </div>
    </div>

    <!-- Example 1: Dark Modern Sidebar -->
    <div x-show="currentExample === 1" x-data="{ active: 'dashboard' }" class="flex h-[calc(100vh-140px)]">
      <aside class="w-72 bg-gray-900 text-white flex flex-col">
        <div class="p-6 border-b border-gray-800">
          <h2 class="text-2xl font-bold">DarkUI</h2>
          <p class="text-gray-400 text-sm mt-1">Admin Dashboard</p>
        </div>
        <nav class="flex-1 p-4 space-y-1">
          <button @click="active = 'dashboard'" :class="active === 'dashboard' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800'" class="w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all">
            <ion-icon name="grid-outline" class="text-xl"></ion-icon>
            <span class="font-medium">Dashboard</span>
          </button>
          <button @click="active = 'analytics'" :class="active === 'analytics' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800'" class="w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all">
            <ion-icon name="bar-chart-outline" class="text-xl"></ion-icon>
            <span class="font-medium">Analytics</span>
          </button>
          <button @click="active = 'projects'" :class="active === 'projects' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800'" class="w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all">
            <ion-icon name="folder-outline" class="text-xl"></ion-icon>
            <span class="font-medium">Projects</span>
            <span class="ml-auto bg-gray-700 text-xs px-2 py-1 rounded-full">8</span>
          </button>
          <button @click="active = 'team'" :class="active === 'team' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800'" class="w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all">
            <ion-icon name="people-outline" class="text-xl"></ion-icon>
            <span class="font-medium">Team</span>
          </button>
          <button @click="active = 'settings'" :class="active === 'settings' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800'" class="w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all">
            <ion-icon name="settings-outline" class="text-xl"></ion-icon>
            <span class="font-medium">Settings</span>
          </button>
        </nav>
        <div class="p-4 border-t border-gray-800">
          <div class="flex items-center gap-3 px-4 py-3 bg-gray-800 rounded-lg">
            <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center font-bold">A</div>
            <div class="flex-1">
              <p class="text-sm font-medium">Admin User</p>
              <p class="text-xs text-gray-400">admin@company.com</p>
            </div>
          </div>
        </div>
      </aside>
      <main class="flex-1 bg-gray-100 p-8 overflow-auto">
        <h3 class="text-2xl font-bold text-gray-800 mb-2">Dark Modern Sidebar</h3>
        <p class="text-gray-600">Clean dark theme with blue accent colors and smooth transitions.</p>
      </main>
    </div>

    <!-- Example 2: Light Minimal Sidebar -->
    <div x-show="currentExample === 2" x-data="{ active: 'home' }" class="flex h-[calc(100vh-140px)]">
      <aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
        <div class="p-6">
          <h2 class="text-xl font-bold text-gray-800">Minimal</h2>
        </div>
        <nav class="flex-1 px-3 space-y-1">
          <button @click="active = 'home'" :class="active === 'home' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:bg-gray-50'" class="w-full flex items-center gap-3 px-3 py-2 rounded-md transition-colors text-sm">
            <ion-icon name="home-outline" class="text-lg"></ion-icon>
            <span>Home</span>
          </button>
          <button @click="active = 'explore'" :class="active === 'explore' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:bg-gray-50'" class="w-full flex items-center gap-3 px-3 py-2 rounded-md transition-colors text-sm">
            <ion-icon name="compass-outline" class="text-lg"></ion-icon>
            <span>Explore</span>
          </button>
          <button @click="active = 'notifications'" :class="active === 'notifications' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:bg-gray-50'" class="w-full flex items-center gap-3 px-3 py-2 rounded-md transition-colors text-sm">
            <ion-icon name="notifications-outline" class="text-lg"></ion-icon>
            <span>Notifications</span>
            <span class="ml-auto w-2 h-2 bg-red-500 rounded-full"></span>
          </button>
          <button @click="active = 'messages'" :class="active === 'messages' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:bg-gray-50'" class="w-full flex items-center gap-3 px-3 py-2 rounded-md transition-colors text-sm">
            <ion-icon name="mail-outline" class="text-lg"></ion-icon>
            <span>Messages</span>
          </button>
          <button @click="active = 'bookmarks'" :class="active === 'bookmarks' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:bg-gray-50'" class="w-full flex items-center gap-3 px-3 py-2 rounded-md transition-colors text-sm">
            <ion-icon name="bookmark-outline" class="text-lg"></ion-icon>
            <span>Bookmarks</span>
          </button>
          <button @click="active = 'profile'" :class="active === 'profile' ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:bg-gray-50'" class="w-full flex items-center gap-3 px-3 py-2 rounded-md transition-colors text-sm">
            <ion-icon name="person-outline" class="text-lg"></ion-icon>
            <span>Profile</span>
          </button>
        </nav>
      </aside>
      <main class="flex-1 bg-gray-50 p-8 overflow-auto">
        <h3 class="text-2xl font-bold text-gray-800 mb-2">Light Minimal Sidebar</h3>
        <p class="text-gray-600">Ultra-clean light theme with subtle accents and compact spacing.</p>
      </main>
    </div>

    <!-- Example 3: Gradient Accent Sidebar -->
    <div x-show="currentExample === 3" x-data="{ active: 'overview' }" class="flex h-[calc(100vh-140px)]">
      <aside class="w-72 bg-gradient-to-b from-purple-600 to-indigo-700 text-white flex flex-col">
        <div class="p-6">
          <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center mb-3">
            <ion-icon name="rocket" class="text-3xl"></ion-icon>
          </div>
          <h2 class="text-2xl font-bold">Gradient Pro</h2>
        </div>
        <nav class="flex-1 px-4 space-y-2">
          <button @click="active = 'overview'" :class="active === 'overview' ? 'bg-white/20 backdrop-blur-sm shadow-lg' : 'hover:bg-white/10'" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all">
            <ion-icon name="pie-chart-outline" class="text-xl"></ion-icon>
            <span class="font-medium">Overview</span>
          </button>
          <button @click="active = 'reports'" :class="active === 'reports' ? 'bg-white/20 backdrop-blur-sm shadow-lg' : 'hover:bg-white/10'" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all">
            <ion-icon name="document-text-outline" class="text-xl"></ion-icon>
            <span class="font-medium">Reports</span>
          </button>
          <button @click="active = 'campaigns'" :class="active === 'campaigns' ? 'bg-white/20 backdrop-blur-sm shadow-lg' : 'hover:bg-white/10'" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all">
            <ion-icon name="megaphone-outline" class="text-xl"></ion-icon>
            <span class="font-medium">Campaigns</span>
          </button>
          <button @click="active = 'customers'" :class="active === 'customers' ? 'bg-white/20 backdrop-blur-sm shadow-lg' : 'hover:bg-white/10'" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all">
            <ion-icon name="people-circle-outline" class="text-xl"></ion-icon>
            <span class="font-medium">Customers</span>
          </button>
        </nav>
        <div class="p-4">
          <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
            <h4 class="font-semibold mb-2">Upgrade to Pro</h4>
            <p class="text-sm text-white/80 mb-3">Get unlimited access to all features</p>
            <button class="w-full bg-white text-purple-600 py-2 rounded-lg font-semibold hover:bg-white/90 transition-colors">
              Upgrade Now
            </button>
          </div>
        </div>
      </aside>
      <main class="flex-1 bg-gray-50 p-8 overflow-auto">
        <h3 class="text-2xl font-bold text-gray-800 mb-2">Gradient Accent Sidebar</h3>
        <p class="text-gray-600">Bold gradient background with glassmorphism effects and modern styling.</p>
      </main>
    </div>

    <!-- Example 4: Icon Only Sidebar -->
    <div x-show="currentExample === 4" x-data="{ active: 'dashboard', expanded: false }" class="flex h-[calc(100vh-140px)]">
      <aside :class="expanded ? 'w-64' : 'w-20'" class="bg-white border-r border-gray-200 flex flex-col transition-all duration-300">
        <div class="p-4 border-b border-gray-200 flex items-center justify-between">
          <h2 x-show="expanded" x-transition class="text-lg font-bold text-gray-800">IconNav</h2>
          <button @click="expanded = !expanded" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ion-icon :name="expanded ? 'chevron-back-outline' : 'menu-outline'" class="text-xl text-gray-600"></ion-icon>
          </button>
        </div>
        <nav class="flex-1 p-3 space-y-2">
          <button @click="active = 'dashboard'" :class="active === 'dashboard' ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-100'" class="w-full flex items-center gap-3 px-3 py-3 rounded-lg transition-all group relative">
            <ion-icon name="apps-outline" class="text-2xl flex-shrink-0"></ion-icon>
            <span x-show="expanded" x-transition class="font-medium whitespace-nowrap">Dashboard</span>
            <div x-show="!expanded" class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">Dashboard</div>
          </button>
          <button @click="active = 'analytics'" :class="active === 'analytics' ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-100'" class="w-full flex items-center gap-3 px-3 py-3 rounded-lg transition-all group relative">
            <ion-icon name="stats-chart-outline" class="text-2xl flex-shrink-0"></ion-icon>
            <span x-show="expanded" x-transition class="font-medium whitespace-nowrap">Analytics</span>
            <div x-show="!expanded" class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">Analytics</div>
          </button>
          <button @click="active = 'tasks'" :class="active === 'tasks' ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-100'" class="w-full flex items-center gap-3 px-3 py-3 rounded-lg transition-all group relative">
            <ion-icon name="checkbox-outline" class="text-2xl flex-shrink-0"></ion-icon>
            <span x-show="expanded" x-transition class="font-medium whitespace-nowrap">Tasks</span>
            <div x-show="!expanded" class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">Tasks</div>
          </button>
          <button @click="active = 'calendar'" :class="active === 'calendar' ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-100'" class="w-full flex items-center gap-3 px-3 py-3 rounded-lg transition-all group relative">
            <ion-icon name="calendar-outline" class="text-2xl flex-shrink-0"></ion-icon>
            <span x-show="expanded" x-transition class="font-medium whitespace-nowrap">Calendar</span>
            <div x-show="!expanded" class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">Calendar</div>
          </button>
          <button @click="active = 'files'" :class="active === 'files' ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-100'" class="w-full flex items-center gap-3 px-3 py-3 rounded-lg transition-all group relative">
            <ion-icon name="cloud-outline" class="text-2xl flex-shrink-0"></ion-icon>
            <span x-show="expanded" x-transition class="font-medium whitespace-nowrap">Files</span>
            <div x-show="!expanded" class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">Files</div>
          </button>
        </nav>
      </aside>
      <main class="flex-1 bg-gray-50 p-8 overflow-auto">
        <h3 class="text-2xl font-bold text-gray-800 mb-2">Icon Only Sidebar</h3>
        <p class="text-gray-600">Collapsible sidebar with icon-first design and helpful tooltips.</p>
      </main>
    </div>

    <!-- Example 5: Floating Cards Sidebar -->
    <div x-show="currentExample === 5" x-data="{ active: 'workspace' }" class="flex h-[calc(100vh-140px)] bg-gray-100">
      <aside class="w-80 p-4 flex flex-col gap-4">
        <div class="bg-white rounded-2xl shadow-lg p-6">
          <div class="flex items-center gap-3 mb-6">
            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
              <ion-icon name="sparkles" class="text-2xl text-white"></ion-icon>
            </div>
            <div>
              <h2 class="text-lg font-bold text-gray-800">CardUI</h2>
              <p class="text-xs text-gray-500">Premium Account</p>
            </div>
          </div>
          <nav class="space-y-2">
            <button @click="active = 'workspace'" :class="active === 'workspace' ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-md' : 'text-gray-700 hover:bg-gray-50'" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all">
              <ion-icon name="briefcase-outline" class="text-xl"></ion-icon>
              <span class="font-medium">Workspace</span>
            </button>
            <button @click="active = 'projects'" :class="active === 'projects' ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-md' : 'text-gray-700 hover:bg-gray-50'" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all">
              <ion-icon name="layers-outline" class="text-xl"></ion-icon>
              <span class="font-medium">Projects</span>
              <span :class="active === 'projects' ? 'bg-white/20' : 'bg-gray-200'" class="ml-auto text-xs px-2 py-1 rounded-full font-semibold">12</span>
            </button>
            <button @click="active = 'team'" :class="active === 'team' ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-md' : 'text-gray-700 hover:bg-gray-50'" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all">
              <ion-icon name="people-outline" class="text-xl"></ion-icon>
              <span class="font-medium">Team</span>
            </button>
            <button @click="active = 'insights'" :class="active === 'insights' ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-md' : 'text-gray-700 hover:bg-gray-50'" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all">
              <ion-icon name="bulb-outline" class="text-xl"></ion-icon>
              <span class="font-medium">Insights</span>
            </button>
          </nav>
        </div>

        <div class="bg-gradient-to-br from-orange-400 to-pink-500 rounded-2xl shadow-lg p-6 text-white">
          <ion-icon name="trophy" class="text-4xl mb-3"></ion-icon>
          <h3 class="font-bold text-lg mb-1">Achievement Unlocked!</h3>
          <p class="text-sm text-white/90">You've completed 50 tasks this week</p>
        </div>

        <div class="bg-white rounded-2xl shadow-lg p-6">
          <h4 class="font-semibold text-gray-800 mb-3">Quick Actions</h4>
          <div class="space-y-2">
            <button class="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
              <ion-icon name="add-circle-outline" class="text-lg"></ion-icon>
              <span>New Project</span>
            </button>
            <button class="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
              <ion-icon name="person-add-outline" class="text-lg"></ion-icon>
              <span>Invite Team</span>
            </button>
          </div>
        </div>
      </aside>
      <main class="flex-1 bg-white m-4 rounded-2xl shadow-lg p-8 overflow-auto">
        <h3 class="text-2xl font-bold text-gray-800 mb-2">Floating Cards Sidebar</h3>
        <p class="text-gray-600">Modern card-based layout with gradient accents and modular sections.</p>
      </main>
    </div>
  </div>