Componente della barra di navigazione
Un componente della barra di navigazione reattivo progettato in stile Material Design con combinazione di colori triadica, adatto per le interfacce dei social media e include il supporto per il tema scuro.
Codice HTML
<nav class="bg-blue-600 dark:bg-gray-800 shadow-md">
<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 items-center">
<img src="https://picsum.photos/50" alt="Logo" class="h-8 w-8 rounded-full">
</div>
<div class="hidden md:flex items-center space-x-4 ml-6">
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Services</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
<div class="hidden md:flex items-center">
<a href="#" class="flex items-center text-gray-900 dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="h-8 w-8 rounded-full mr-2">
Profile
</a>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-blue-500 dark:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
</div>
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">About</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Services</a>
<a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
</div>
</div>
</nav>
Componenti correlati
Barra di navigazione dei social media skeuomorfa
Barra di navigazione dei social media scheumorfa con combinazione di colori triadica e complessità moderata.
Transizioni gradiente/colore Barra di navigazione del cruscotto in scala di grigi
Una barra di navigazione complessa e reattiva per una dashboard, con transizioni sfumate in una combinazione di colori in scala di grigi. Include più elementi interattivi e il supporto completo della modalità scura.
Cyberpunk_Retro_Food_Navbar
Una barra di navigazione semplice e reattiva con un'estetica cyberpunk-retrò, progettata per siti web di cibo/ristoranti. Presenta sfondo scuro, colori tenui e supporto per la modalità scura.