Componente di navigazione permanente - Modalità scura pastello
Una barra di navigazione appiccicosa progettata per la modalità scura, caratterizzata da un layout reattivo e accenti di colori pastello. La barra di navigazione rimane nella parte superiore del riquadro di visualizzazione mentre l'utente scorre, migliorando l'usabilità per le pagine con un contenuto elevato. Include segnaposto per un logo o un titolo del sito e link di navigazione, con stile CSS Tailwind per un look moderno e pulito.
Codice HTML
<nav class="dark:bg-gray-900 dark:text-gray-200 bg-gray-100 text-gray-800 shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<!-- Logo or Site Title -->
<div class="text-lg font-bold">
<a href="#" class="dark:text-pink-300 text-purple-600 hover:dark:text-pink-400 hover:text-purple-700">Your Logo</a>
</div>
<!-- Navigation Links -->
<div class="hidden md:flex space-x-6">
<a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Home</a>
<a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">About</a>
<a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Services</a>
<a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Contact</a>
</div>
<!-- Mobile Menu Button (Hamburger) -->
<div class="md:hidden">
<button class="focus:outline-none">
<svg class="w-6 h-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>
<!-- Mobile Menu (Dropdown - hidden by default) -->
<div class="md:hidden border-t dark:border-gray-700 border-gray-200">
<a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Home</a>
<a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">About</a>
<a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Services</a>
<a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Contact</a>
</div>
</nav>Componenti correlati
Brutalista Navigazione Appiccicosa
Un componente di navigazione appiccicosa in stile brutalista con comportamento reattivo e supporto per la modalità oscura utilizzando Tailwind CSS. Presenta un contrasto elevato, una tipografia audace e un'estetica cruda e cruda.
Navigazione appiccicosa retrò per l'e-commerce
Un componente di navigazione appiccicosa retrò/vintage per siti di e-commerce con colori vivaci, elementi complessi, reattività e supporto per la modalità oscura utilizzando Tailwind CSS.
Nav appiccicoso skeuomorfo in scala di grigi
Una barra di navigazione appiccicosa reattiva per i blog, stilizzata con scheumorfismo utilizzando una tavolozza in scala di grigi. Dispone di supporto per la modalità oscura e un layout semplice. Costruito con Tailwind CSS (solo HTML), senza JavaScript. Il design scheumorfico mira a far apparire la barra di navigazione come un elemento fisico, leggermente rialzato.