Back to Discover
Tailwind CSS off Canvas Menu Code

Amelia
Created Nov 03, 2025
1 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="{ open: false }" class="relative">
          <!-- Header -->
          <header class="bg-white shadow-sm">
              <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                  <div class="flex justify-between items-center h-16">
                      <div class="flex items-center">
                          <button @click="open = true" class="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
                              <ion-icon name="menu-outline" class="text-2xl"></ion-icon>
                          </button>
                          <h1 class="ml-4 text-xl font-semibold text-gray-900">My Application</h1>
                      </div>
                      <nav class="hidden md:flex space-x-8">
                          <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
                          <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
                          <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
                      </nav>
                  </div>
              </div>
          </header>

          <!-- Overlay -->
          <div x-show="open" 
               x-transition:enter="transition-opacity ease-linear duration-300"
               x-transition:enter-start="opacity-0"
               x-transition:enter-end="opacity-100"
               x-transition:leave="transition-opacity ease-linear duration-300"
               x-transition:leave-start="opacity-100"
               x-transition:leave-end="opacity-0"
               @click="open = false"
               class="fixed inset-0 bg-black bg-opacity-50 z-40"
               style="display: none;">
          </div>

          <!-- Off-Canvas Menu -->
          <div x-show="open"
               x-transition:enter="transition ease-in-out duration-300 transform"
               x-transition:enter-start="-translate-x-full"
               x-transition:enter-end="translate-x-0"
               x-transition:leave="transition ease-in-out duration-300 transform"
               x-transition:leave-start="translate-x-0"
               x-transition:leave-end="-translate-x-full"
               class="fixed inset-y-0 left-0 w-64 bg-white shadow-xl z-50 overflow-y-auto"
               style="display: none;">

              <!-- Menu Header -->
              <div class="flex items-center justify-between p-4 border-b border-gray-200">
                  <h2 class="text-lg font-semibold text-gray-900">Menu</h2>
                  <button @click="open = false" class="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                      <ion-icon name="close-outline" class="text-2xl"></ion-icon>
                  </button>
              </div>

              <!-- Menu Items -->
              <nav class="p-4">
                  <ul class="space-y-2">
                      <li>
                          <a href="#" class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                              <ion-icon name="home-outline" class="text-xl mr-3"></ion-icon>
                              <span>Home</span>
                          </a>
                      </li>
                      <li>
                          <a href="#" class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                              <ion-icon name="person-outline" class="text-xl mr-3"></ion-icon>
                              <span>Profile</span>
                          </a>
                      </li>
                      <li>
                          <a href="#" class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                              <ion-icon name="settings-outline" class="text-xl mr-3"></ion-icon>
                              <span>Settings</span>
                          </a>
                      </li>
                      <li>
                          <a href="#" class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                              <ion-icon name="notifications-outline" class="text-xl mr-3"></ion-icon>
                              <span>Notifications</span>
                          </a>
                      </li>
                      <li>
                          <a href="#" class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                              <ion-icon name="help-circle-outline" class="text-xl mr-3"></ion-icon>
                              <span>Help</span>
                          </a>
                      </li>
                  </ul>

                  <!-- Divider -->
                  <div class="my-4 border-t border-gray-200"></div>

                  <!-- Secondary Menu -->
                  <ul class="space-y-2">
                      <li>
                          <a href="#" class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
                              <ion-icon name="document-text-outline" class="text-xl mr-3"></ion-icon>
                              <span>Documentation</span>
                          </a>
                      </li>
                      <li>
                          <a href="#" class="flex items-center px-4 py-3 text-red-600 rounded-lg hover:bg-red-50 transition-colors">
                              <ion-icon name="log-out-outline" class="text-xl mr-3"></ion-icon>
                              <span>Logout</span>
                          </a>
                      </li>
                  </ul>
              </nav>
          </div>

          <!-- Main Content -->
          <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
              <div class="bg-white rounded-lg shadow p-6">
                  <h2 class="text-2xl font-bold text-gray-900 mb-4">Welcome</h2>
                  <p class="text-gray-600 mb-4">Click the menu icon in the top-left corner to open the off-canvas menu.</p>
                  <p class="text-gray-600">This is a minimal and professional off-canvas menu implementation using Tailwind CSS, Alpine.js, and Ionicons.</p>
              </div>
          </main>
      </div>
Comments (0)

No comments yet. Be the first!