Sticky Navigation-Komponente
Eine Sticky-Navigationskomponente im Dunkelmodus für den E-Commerce, die ein komplementäres Farbschema und ein grundlegendes Layout verwendet.
HTML-Code
<nav class="bg-gray-900 sticky top-0 shadow-lg">
<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">
<div class="flex-shrink-0">
<img class="h-8" src="https://picsum.photos/50/50" alt="Logo">
</div>
<div class="hidden md:flex md:space-x-8 ml-10">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
<div class="flex items-center">
<button class="text-gray-300 hover:bg-gray-700 hover:text-white p-1 rounded-full">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Profile">
</button>
</div>
</div>
</div>
</nav>Verwandte Komponenten
Sticky Navigation-Komponente
Eine skeuomorphe Sticky-Navigationskomponente, die für Nachrichten-/Journalismus-Websites entwickelt wurde, mit einem Schwarz-Weiß-Farbschema mit einer hellen Akzentfarbe, Reaktionsfähigkeit und Unterstützung des Dunkelmodus. Es ahmt reale Knöpfe und vertiefte Elemente nach.
Sticky Navigation-Komponente
Eine reaktionsschnelle, klebrige Navigationsleiste mit Neon-/Leuchteffekten, die sich für Bildungs- oder Lernplattformen eignet. Verfügt über ein lila/violettes Farbschema, Unterstützung für den Dunkelmodus und interaktive Menüpunkte.
Sticky Navigation-Komponente
Eine einfache, saubere und kontrastreiche Sticky-Navigationsleiste mit Monospace-/Entwickler-Ästhetik, die sich für Unterhaltungs- oder Medienplattformen eignet.