RetroNav
Eine einfache, reaktionsschnelle und mit dem Dunkelmodus kompatible Navigationskomponente mit Retro-/Vintage-Design, lebendigem Farbschema und minimalen Elementen, die für E-Commerce-Websites geeignet ist.
HTML-Code
<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
<div class="container mx-auto flex items-center justify-between">
<div class="text-white text-2xl font-bold">RetroShop</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-white hover:text-gray-200">Home</a>
<a href="#" class="text-white hover:text-gray-200">Products</a>
<a href="#" class="text-white hover:text-gray-200">About</a>
<a href="#" class="text-white hover:text-gray-200">Contact</a>
</div>
<div class="md:hidden">
<button class="text-white">
<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>Verwandte Komponenten
Bauhaus Jewel Ton Navigation
Eine einfache, funktionale Navigationskomponente mit geometrischen Formen und Juwelentönen, die für Buchungs-/Reservierungssysteme entwickelt wurde. Bietet Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.
Navigationskomponente
Eine reaktionsschnelle Navigationskomponente, die für ein Portfolio entwickelt wurde, mit Mikrointeraktionen und Unterstützung für dunkle Themen.
Skeuomorphe Navigationskomponente
Eine skeuomorphe Navigationskomponente, die reale Elemente wie ein physisches Bedienfeld oder Dashboard nachahmt. Bietet responsives Design, Hover-Effekte, die physische Tastendrücke simulieren, und Unterstützung für dunkle Themen. Die Navigation umfasst subtile Schatten, Farbverläufe und Texturen, um ein 3D-Erscheinungsbild zu erzeugen, das an physische Schnittstellen erinnert.