Composants Navigation collante Navigation collante (glassmorphism)

Navigation collante (glassmorphism)

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

Aperçu

HTML Code

<nav class="sticky top-0 z-10 backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <div class="flex-shrink-0">
        <span class="text-2xl font-semibold text-gray-900 dark:text-white">Glassmorphism Nav</span>
      </div>
      <div class="hidden md:block">
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="bg-gray-100 dark:bg-gray-700 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-200 dark:hover:text-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </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-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Services</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
  </div>
</nav>

Composants associés

Composant de navigation collante

Un composant de navigation autocollant en mode sombre pour le commerce électronique, utilisant une palette de couleurs complémentaires et une mise en page de base.

Ouvrir

Composant de navigation collante

Composant de navigation collant avec conception Skeuomorphism, réactif et prise en charge du thème sombre. Utilise Tailwind CSS.

Ouvrir

Composant de navigation collante

Une barre de navigation autocollante propre, fiable et simple, adaptée aux sites Web d’entreprise et d’événements. Dispose d’un monochrome noir et blanc avec une couleur d’accent vive, une réactivité totale et une prise en charge du mode sombre.

Ouvrir