Back to Discover
Tailwind CSS Navigation Bar with icons

Amelia
Created Nov 03, 2025
0 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">
      <!-- Navigation Bar -->
      <nav x-data="{ mobileMenuOpen: false }" 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">
                  <!-- Logo -->
                  <div class="flex items-center">
                      <span class="text-2xl font-semibold text-gray-900">Brand</span>
                  </div>

                  <!-- Desktop Navigation -->
                  <div class="hidden md:flex items-center space-x-1">
                      <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">
                          <ion-icon name="home-outline" class="text-xl mr-2"></ion-icon>
                          <span>Home</span>
                      </a>
                      <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">
                          <ion-icon name="search-outline" class="text-xl mr-2"></ion-icon>
                          <span>Explore</span>
                      </a>
                      <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">
                          <ion-icon name="notifications-outline" class="text-xl mr-2"></ion-icon>
                          <span>Notifications</span>
                      </a>
                      <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">
                          <ion-icon name="settings-outline" class="text-xl mr-2"></ion-icon>
                          <span>Settings</span>
                      </a>
                      <a href="#" class="flex items-center px-4 py-2 ml-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors">
                          <ion-icon name="person-outline" class="text-xl mr-2"></ion-icon>
                          <span>Profile</span>
                      </a>
                  </div>

                  <!-- Mobile Menu Button -->
                  <div class="md:hidden">
                      <button @click="mobileMenuOpen = !mobileMenuOpen" class="p-2 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none">
                          <ion-icon :name="mobileMenuOpen ? 'close-outline' : 'menu-outline'" class="text-2xl"></ion-icon>
                      </button>
                  </div>
              </div>
          </div>

          <!-- Mobile Navigation -->
          <div x-show="mobileMenuOpen" 
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 transform scale-95"
               x-transition:enter-end="opacity-100 transform scale-100"
               x-transition:leave="transition ease-in duration-150"
               x-transition:leave-start="opacity-100 transform scale-100"
               x-transition:leave-end="opacity-0 transform scale-95"
               class="md:hidden border-t border-gray-200">
              <div class="px-4 py-3 space-y-1">
                  <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                      <ion-icon name="home-outline" class="text-xl mr-3"></ion-icon>
                      <span>Home</span>
                  </a>
                  <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                      <ion-icon name="search-outline" class="text-xl mr-3"></ion-icon>
                      <span>Explore</span>
                  </a>
                  <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                      <ion-icon name="notifications-outline" class="text-xl mr-3"></ion-icon>
                      <span>Notifications</span>
                  </a>
                  <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                      <ion-icon name="settings-outline" class="text-xl mr-3"></ion-icon>
                      <span>Settings</span>
                  </a>
                  <a href="#" class="flex items-center px-4 py-3 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors">
                      <ion-icon name="person-outline" class="text-xl mr-3"></ion-icon>
                      <span>Profile</span>
                  </a>
              </div>
          </div>
      </nav>

      <!-- Demo Content -->
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <h1 class="text-3xl font-bold text-gray-900 mb-4">Welcome</h1>
          <p class="text-gray-600">This is a minimal and professional navigation bar with icons using Tailwind CSS, Alpine.js, and Ionicons.</p>
      </div>
Comments (0)

No comments yet. Be the first!