Rechercher des composants

Catégories

Composants Barre de navigation

Barre de navigation

Généralement situé en haut de la page, contenant les liens principaux

Cyberpunk_Finance_Navbar

Une barre de navigation simple et réactive sur le thème du cyberpunk pour les applications financières/bancaires, avec un arrière-plan sombre, des accents dégradés lumineux et la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-neutral-950 dark:bg-black font-mono text-white p-4 shadow-lg shadow-purple-500/20">
  <div class="container mx-auto flex items-center justify-between">
    <!-- Logo/Brand Name -->
    <div class="text-2xl font-bold bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-transparent bg-clip-text drop-shadow-[0_0_8px_rgba(255,0,255,0.7)]">
      CYBERBANK
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button id="menu-toggle" class="text-white focus:outline-none focus:ring-2 focus:ring-purple-500 p-2 rounded-md">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Navigation Links -->
    <div id="mobile-menu" class="hidden md:flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-8 mt-4 md:mt-0">
      <a href="#" class="text-lg relative hover:text-purple-400 transition-colors duration-300 group">
        Dashboard
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-purple-500 to-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-green-400 transition-colors duration-300 group">
        Accounts
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-green-500 to-cyan-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-orange-400 transition-colors duration-300 group">
        Payments
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-orange-500 to-red-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-yellow-400 transition-colors duration-300 group">
        Settings
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-yellow-500 to-pink-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-cyan-400 transition-colors duration-300 group">
        Support
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-cyan-500 to-purple-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>
  </div>

  <!-- Simple JS for Mobile Menu Toggle (not part of the HTML component, but for demonstration) -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuToggle = document.getElementById('menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');

      if (menuToggle && mobileMenu) {
        menuToggle.addEventListener('click', function() {
          mobileMenu.classList.toggle('hidden');
          mobileMenu.classList.toggle('flex');
          mobileMenu.classList.toggle('flex-col');
        });
      }
    });
  </script>
</nav>

Barre de navigation rétro/vintage pour les réseaux sociaux

Barre de navigation rétro/vintage pour les médias sociaux avec une palette de couleurs analogue, une complexité simple, une prise en charge réactive et un thème sombre.

Ouvrir Aperçu

                <nav class="bg-gradient-to-r from-purple-700 via-pink-500 to-red-500 p-4 shadow-lg dark:from-purple-900 dark:via-pink-700 dark:to-red-700">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-2xl font-bold font-retro">SocialFlow</div>
    <div class="space-x-4">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Feed</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Friends</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Messages</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Profile</a>
    </div>
    <div class="flex items-center space-x-4">
      <button class="text-white focus:outline-none dark:text-gray-300" onclick="document.documentElement.classList.toggle('dark')">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9 9 0 008.354-5.646z"></path></svg>
      </button>
    </div>
  </div>
</nav>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  .font-retro {
    font-family: 'Press Start 2P', cursive;
  }
</style>

Composant de la barre de navigation

Une barre de navigation réactive pour un tableau de bord, avec un thème en mode sombre avec des tons de terre. Comprend un logo, des liens de navigation, une barre de recherche et une section de profil utilisateur. Conçu pour une complexité modérée avec des éléments interactifs.

Ouvrir Aperçu

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="flex items-center space-x-4">
      <!-- Logo -->
      <a href="#" class="text-white text-2xl font-bold font-serif">DashboardPro</a>

      <!-- Mobile Menu Button -->
      <button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-400 rounded-lg md:hidden hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
        <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>

    <!-- Navigation Links and Search (Collapsible) -->
    <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
      <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium items-center">
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-white rounded bg-transparent md:bg-transparent md:text-amber-300 dark:text-amber-400 md:p-0" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-gray-300 rounded hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-amber-300 dark:hover:text-amber-400 md:p-0">Analytics</a>
        </li>
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-gray-300 rounded hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-amber-300 dark:hover:text-amber-400 md:p-0">Reports</a>
        </li>
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-gray-300 rounded hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-amber-300 dark:hover:text-amber-400 md:p-0">Settings</a>
        </li>

        <!-- Search Bar -->
        <li class="mt-4 md:mt-0">
          <form class="flex items-center">
            <label for="simple-search" class="sr-only">Search</label>
            <div class="relative w-full">
              <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                <svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
              </div>
              <input type="text" id="simple-search" class="bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-white text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full pl-10 p-2.5" placeholder="Search" required>
            </div>
          </form>
        </li>

        <!-- User Profile/Avatar -->
        <li class="mt-4 md:mt-0">
          <a href="#" class="flex items-center space-x-2 text-gray-300 hover:text-white dark:hover:text-amber-400">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <span class="hidden md:inline-block">John Doe</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Simple JavaScript for mobile menu toggle (can be enhanced) -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('[data-collapse-toggle="mobile-menu"]');
    const menu = document.getElementById('mobile-menu');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
    });
  });
</script>

Composant de la barre de navigation

Une barre de navigation réactive pour un site Web de commerce électronique, avec un style de conception glassmorphism avec une palette de couleurs en niveaux de gris et la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <nav class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-b border-gray-200 dark:border-gray-700 fixed w-full z-10">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="relative flex items-center justify-between h-16">
            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 hover:dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500 dark:focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
            <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                <div class="flex-shrink-0">
                    <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">E-Shop</a>
                </div>
                <div class="hidden sm:block sm:ml-6">
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Products</a>
                        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About Us</a>
                        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                    </div>
                </div>
            </div>
            <div class="hidden sm:block">
                <div class="flex items-center">
                    <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Login</a>
                    <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Cart</a>
                </div>
            </div>
        </div>
    </div>
</nav>

<div class="sm:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Products</a>
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About Us</a>
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Login</a>
        <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Cart</a>
    </div>
</div>

Composant de la barre de navigation

Une barre de navigation réactive avec des micro-interactions attrayantes, conçue pour le commerce électronique, utilisant un thème sombre et des couleurs de terre.

Ouvrir Aperçu

                <nav class="bg-brown-800 text-white dark:bg-brown-900 shadow-lg">
    <div class="container mx-auto flex justify-between items-center p-4">
        <a href="#" class="text-2xl font-bold hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Shop</a>
        <div class="hidden md:flex space-x-8">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">
                <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full">
            </a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Cart</a>
        </div>
        <button class="md:hidden text-brown-200 hover:text-brown-500 dark:hover:text-brown-300 transition-colors focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
        </button>
    </div>
</nav>

<!-- Responsive adjustments for mobile -->
<div class="md:hidden">
    <ul class="bg-brown-800 text-white dark:bg-brown-900 p-4 space-y-2">
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a></li>
    </ul>
</div>

Barre de navigation skeuomorphe

Composant de la barre de navigation du portfolio conçu avec des styles skeuomorphes et une palette de couleurs pastel, y compris la prise en charge du mode sombre. Il comporte des éléments interactifs tels que des liens et un menu déroulant.

Ouvrir Aperçu

                <nav class="bg-white dark:bg-gray-800 shadow-lg p-4 rounded-lg flex items-center justify-between">  <div class="flex items-center space-x-4">    <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">    <span class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</span>  </div>  <ul class="flex space-x-6">    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Home</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">About</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Portfolio</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Contact</a></li>  </ul>  <div class="relative">    <button class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200 focus:outline-none">      Menu      <span class="inline-flex items-center justify-center w-3 h-3 bg-gray-800 dark:bg-white rounded-full"></span>    </button>    <ul class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg hidden" id="dropdown-menu">      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Profile</a></li>      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Settings</a></li>      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Logout</a></li>    </ul>  </div>  <button class="hidden md:block text-gray-800 dark:text-white border border-gray-400 dark:border-gray-600 rounded-lg px-4 py-2 hover:bg-pink-500 dark:hover:bg-pink-400 transition ease-in-out duration-200">Get Started</button></nav>

Composant de la barre de navigation

Composant simple de barre de navigation réactive conçu pour un tableau de bord, doté d’un schéma de couleurs monochromatiques et de micro-interactions. Il comprend un support en mode sombre avec des effets de survol pour des animations engageantes.

Ouvrir Aperçu

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center h-16">
            <div class="flex-shrink-0">
                <h1 class="text-white text-2xl">Dashboard</h1>
            </div>
            <div class="hidden md:block">
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Home</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Profile</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Settings</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Logout</a>
                </div>
            </div>
            <div class="flex md:hidden">
                <button class="text-gray-300 hover:text-white focus:outline-none">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <h2 class="text-white text-xl mb-4">Welcome to your Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">Data Visualization</h3>
            <img src="https://picsum.photos/300/200" alt="Visualization" class="mt-2 rounded" />
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">Control Panel</h3>
            <img src="https://picsum.photos/300/201" alt="Control" class="mt-2 rounded" />
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">User Insights</h3>
            <img src="https://picsum.photos/300/202" alt="Insights" class="mt-2 rounded" />
        </div>
    </div>
</div>

Composant de la barre de navigation

Un composant de barre de navigation réactif conçu dans le style Material Design avec une palette de couleurs triadique, adapté aux interfaces de médias sociaux et incluant la prise en charge du thème sombre.

Ouvrir Aperçu

                <nav class="bg-blue-600 dark:bg-gray-800 shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50" alt="Logo" class="h-8 w-8 rounded-full">
                </div>
                <div class="hidden md:flex items-center space-x-4 ml-6">
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">About</a>
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Services</a>
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                </div>
            </div>
            <div class="hidden md:flex items-center">
                <a href="#" class="flex items-center text-gray-900 dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="h-8 w-8 rounded-full mr-2">
                    Profile
                </a>
            </div>
            <div class="-mr-2 flex md:hidden">
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-blue-500 dark:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home</a>
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">About</a>
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Services</a>
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
        </div>
    </div>
</nav>

Barre de navigation du blog

Barre de navigation réactive avec prise en charge du mode sombre pour les sites Web de blog/contenu. Dispose d’un design minimaliste / plat avec une palette de couleurs pastel.

Ouvrir Aperçu

                <nav class="bg-pink-100 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white">My Blog</a>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Blog</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a>
    </div>
  </div>
</nav>

Social-Media-Glassmorphism-Navbar

Barre de navigation réactive Glassmorphism sur les réseaux sociaux avec mode sombre

Ouvrir Aperçu

                <nav class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-lg dark:from-gray-800 dark:via-gray-900 dark:to-black dark:bg-opacity-30 fixed w-full z-10">
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
    <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">SocialApp</span>
    </a>
    <div class="flex md:order-2">
      <button type="button" data-collapse-toggle="navbar-search" aria-controls="navbar-search" aria-expanded="false" class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 me-1">
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
      </svg>
      <span class="sr-only">Search</span>
      </button>
      <div class="relative hidden md:block">
        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
          <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
          </svg>
          <span class="sr-only">Search icon</span>
        </div>
        <input type="text" id="search-navbar" class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-white bg-opacity-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search...">
      </div>
      <button data-collapse-toggle="navbar-search" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-search" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
        </svg>
    </button>
       <div class="flex items-center ml-4">
                <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            </div>
    </div>
    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-search">
      <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-white bg-opacity-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 dark:bg-opacity-30 md:dark:bg-transparent dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Profile</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Messages</a>
        </li>
           <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Notifications</a>
        </li>
      </ul>
    </div>
  </div>
</nav>