Componenti Navigazione Componente di navigazione di lusso

Componente di navigazione di lusso

Un componente di navigazione elegante e reattivo per i marchi di moda e bellezza, caratterizzato da un sofisticato design in bianco e nero con un colore d'accento brillante, supporto per la modalità scura ed elementi minimi.

Anteprima

Codice HTML

<nav class="bg-white dark:bg-gray-900 shadow-sm dark:shadow-lg transition duration-300 ease-in-out">
  <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 items-center">
        <!-- Logo -->
        <a href="#" class="flex-shrink-0 flex items-center">
          <span class="text-2xl font-bold tracking-wider text-black dark:text-white uppercase font-serif">LUXE</span>
        </a>
      </div>

      <div class="flex items-center">
        <!-- Desktop Navigation -->
        <div class="hidden md:flex md:space-x-8 font-medium">
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Home</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Shop</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Collections</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">About</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Contact</a>
        </div>

        <!-- Mobile Menu Button -->
        <div class="-mr-2 flex md:hidden">
          <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500 dark:focus:ring-red-400 transition duration-200 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <!-- Icon when menu is closed -->
            <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>
            <!-- Icon when menu is open -->
            <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>

  <!-- Mobile Menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 animate-fade-in-down">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Home</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Shop</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Collections</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Contact</a>
    </div>
  </div>
</nav>

Componenti correlati

Componente di navigazione 3D

Un componente di navigazione 3D reattivo progettato con Tailwind CSS, con supporto per temi scuri ed elementi tridimensionali accattivanti.

Aperto

Componente di navigazione dei social media

Un componente di navigazione reattivo progettato per le interfacce dei social media, caratterizzato da un'estetica Material Design che utilizza un tema scuro con Tailwind CSS.

Aperto

3D_Earth_Tone_Dating_Social_Navigation

Un componente di navigazione reattivo per piattaforme di appuntamenti/social, caratterizzato da un design ispirato al 3D con toni della terra e supporto per la modalità oscura. Include elementi interattivi come un avatar del profilo, la ricerca e i collegamenti di navigazione principali.

Aperto