Barra di navigazione retrò per l'e-commerce
Un componente di navigazione in scala di grigi in stile retrò/vintage per l'e-commerce, caratterizzato da una complessità moderata con elementi interattivi come passaggi del mouse e menu a discesa. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<nav class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-md">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="text-lg font-bold">RetroShop</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
<div class="relative group">
<button class="hover:text-gray-900 dark:hover:text-white transition duration-300">Shop</button>
<div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg mt-2 py-2 w-48">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">All Products</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 1</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 2</a>
</div>
</div>
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">
<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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</a>
<button class="md:hidden">
<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 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</nav>Componenti correlati
RetroPortfolioNavigazione
Componente di navigazione retrò/vintage per Portfolio con combinazione di colori pastello, reattivo e supporto per la modalità scura.
Componente di navigazione 43
Un componente di navigazione reattivo che segue i principi del design scheumorfico, con elementi digitali che imitano le loro controparti del mondo reale, con supporto per temi scuri.
Componenti di navigazione
Una barra di navigazione in modalità oscura con design reattivo, con un logo, un avatar e collegamenti per la navigazione.