Composants Navigation collante Composant de navigation autocollant - Mode sombre Pastel

Composant de navigation autocollant - Mode sombre Pastel

Une barre de navigation autocollante conçue pour le mode sombre, avec une mise en page réactive et des accents de couleurs pastel. La barre de navigation reste en haut de la fenêtre d’affichage lorsque l’utilisateur fait défiler l’écran, ce qui améliore la convivialité des pages à fort contenu. Il comprend des espaces réservés pour un logo ou un titre de site et des liens de navigation, stylisés avec Tailwind CSS pour un look moderne et épuré.

Aperçu

HTML Code

<nav class="dark:bg-gray-900 dark:text-gray-200 bg-gray-100 text-gray-800 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo or Site Title -->
    <div class="text-lg font-bold">
      <a href="#" class="dark:text-pink-300 text-purple-600 hover:dark:text-pink-400 hover:text-purple-700">Your Logo</a>
    </div>
    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Home</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">About</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Services</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Contact</a>
    </div>
    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="focus:outline-none">
        <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 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
  <!-- Mobile Menu (Dropdown - hidden by default) -->
  <div class="md:hidden border-t dark:border-gray-700 border-gray-200">
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Home</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">About</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Services</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Contact</a>
  </div>
</nav>

Composants associés

Retro_Vintage_Sticky_Navigation_Component

Une barre de navigation autocollante complexe, d’inspiration rétro/vintage, conçue pour les sites Web d’événements ou de conférences, avec une palette de couleurs pastel douces, une réactivité totale et une prise en charge du mode sombre. Il comprend un logo, des liens de navigation, un bouton d’appel à l’action et une icône de recherche.

Ouvrir

Navigation collante (glassmorphism)

Composant de navigation collant avec prise en charge du style Glassmorphism, réactif et du thème sombre.

Ouvrir

Composant de navigation collante

Une barre de navigation autocollante réactive conçue avec des micro-interactions et une palette de couleurs triadique, adaptée aux blogs et à la consommation de contenu.

Ouvrir