Componente di navigazione
Un componente di navigazione reattivo progettato con microinterazioni e caratterizzato da animazioni coinvolgenti basate sulle azioni dell'utente, che supportano temi chiari e scuri. Il componente include l'avatar del profilo, i collegamenti di navigazione e gli effetti al passaggio del mouse.
Codice HTML
<nav class="bg-white dark:bg-gray-800 shadow-md p-4 rounded-md flex justify-between items-center transition-all duration-300">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full transition-transform transform hover:scale-110 duration-300">
<h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Website</h1>
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">About</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Contact</a>
</div>
</nav>
Componenti correlati
Componenti di navigazione
Un componente di navigazione reattivo che segue i principi del Material Design con una combinazione di colori triadica, rivolto alle interfacce dei social media, con supporto per la modalità scura.
Navigazione del portfolio in modalità scura
Un componente di navigazione complesso e reattivo per un sito web di portfolio, dotato di un'interfaccia utente in modalità scura con colori analoghi, progettato per mostrare lavori o prodotti. Include layout per desktop, tablet e dispositivi mobili con menu a discesa e avatar utente.
Cyberpunk Meteo Navigazione
Un componente di navigazione a tema cyberpunk semplice e reattivo per un'applicazione meteo, con colori tenui e accenti al neon, con supporto per la modalità oscura.