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
Componente di navigazione permanente
Un componente di navigazione appiccicosa complesso e reattivo con un'estetica di progettazione 3D e una tavolozza di colori foresta/verde, adatto per applicazioni mediche/sanitarie. Include il supporto per la modalità oscura ed elementi interattivi.
Componente di navigazione permanente
Un componente di navigazione appiccicosa reattivo con i principi del Material Design utilizzando Tailwind CSS, con un tema scuro e che include immagini segnaposto e avatar casuali.
Componente di navigazione permanente
Componente di navigazione appiccicosa con design dello scheumorfismo, reattivo e supporto per temi scuri. Utilizza Tailwind CSS.