Componenti Navigazione Brutalista E-commerce Navigazione

Brutalista E-commerce Navigazione

Un componente di navigazione in stile brutalista per l'e-commerce, caratterizzato da una combinazione di colori in scala di grigi, layout complesso, reattività e supporto per la modalità oscura, costruito con Tailwind CSS.

Anteprima

Codice HTML

<nav class="bg-gray-900 text-white dark:bg-black dark:text-gray-100 p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="text-2xl font-bold uppercase border-2 border-white dark:border-gray-100 p-2">Store</div>
    <div class="block lg:hidden">
      <button id="menu-toggle" class="text-white dark:text-gray-100 focus:outline-none">
        <svg class="h-6 w-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 id="menu" class="w-full lg:flex lg:items-center lg:w-auto hidden lg:block mt-4 lg:mt-0">
      <ul class="uppercase text-sm lg:flex-grow">
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Home</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Shop</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Categories</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Contact</a></li>
      </ul>
      <div class="flex items-center mt-4 lg:mt-0">
        <input type="text" placeholder="Search" class="p-2 text-black dark:text-white bg-white dark:bg-gray-800 border-2 border-white dark:border-gray-100 mr-4">
        <a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Cart (0)</a>
      </div>
    </div>
  </div>
</nav>

<script>
  const menuToggle = document.getElementById('menu-toggle');
  const menu = document.getElementById('menu');

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

Componenti correlati

Componente di navigazione vintage retrò

Un componente di navigazione in stile retrò/vintage con una combinazione di colori monocromatica per un cruscotto. Include collegamenti e supporta la modalità oscura.

Aperto

Componente di navigazione per l'e-commerce brutalista

Un componente di navigazione per l'e-commerce complesso e brutalista che utilizza Tailwind CSS, con una combinazione di colori triadica (giallo, ciano, fucsia) ad alto contrasto (nero/bianco), un mega-menu solo CSS, rivelazione della ricerca solo CSS, un menu mobile reattivo solo CSS e supporto per la modalità oscura. Solo HTML, non JavaScript.

Aperto

Componente di navigazione skeuomorfa

Un componente di navigazione progettato in uno stile scheumorfico, caratterizzato da colori vivaci e un layout reattivo adatto ai contenuti del blog. Include funzionalità interattive come gli effetti al passaggio del mouse ed è ottimizzato per la modalità oscura.

Aperto