Componente di navigazione permanente
Una barra di navigazione appiccicosa minimalista e reattiva per i blog, caratterizzata da una combinazione di colori vivaci. Supporta la modalità oscura e ha un layout semplice e pulito con "Titolo del blog" a sinistra e collegamenti di navigazione a destra. La barra di navigazione si blocca nella parte superiore del riquadro di visualizzazione quando l'utente scorre.
Codice HTML
<nav class="bg-gradient-to-r from-teal-400 to-blue-500 dark:from-gray-800 dark:to-gray-900 p-4 shadow-md sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<!-- Blog Title -->
<a href="#" class="text-white text-2xl font-bold dark:text-gray-100">Blog Title</a>
<!-- Navigation Links -->
<div class="hidden md:flex space-x-6">
<a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Home</a>
<a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Categories</a>
<a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">About</a>
<a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Contact</a>
</div>
<!-- Mobile Menu Button (Hamburger) -->
<div class="md:hidden">
<button class="text-white 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 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu (Hidden by default, can be shown with JS) -->
<div class="md:hidden mt-4 space-y-2">
<!-- Hidden for this pure HTML example as JS is not allowed -->
</div>
</nav>Componenti correlati
Componente di navigazione permanente
Un componente di navigazione appiccicoso progettato per la modalità oscura con effetti reattivi utilizzando Tailwind CSS.
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 appiccicosa brutalista
Barra di navigazione appiccicosa brutalista in scala di grigi per un blog con supporto per la modalità oscura