Navigazione giocosa nel cruscotto
Un componente di navigazione del cruscotto semplice, giocoso e reattivo che utilizza toni gioiello con elementi arrotondati e supporto completo della modalità scura.
Codice HTML
<nav class="bg-emerald-400 dark:bg-emerald-800 p-4 rounded-b-3xl shadow-lg">
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
<a href="#" class="text-white text-2xl font-bold tracking-tight mb-4 md:mb-0 dark:text-emerald-100">Dashboard Fun</a>
<button class="md:hidden text-white dark:text-emerald-100 focus:outline-none" aria-label="Toggle navigation">
<svg class="w-8 h-8" 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>
<ul class="hidden md:flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 text-lg">
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Overview</span>
</a>
</li>
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Analytics</span>
</a>
</li>
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Reports</span>
</a>
</li>
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Settings</span>
</a>
</li>
</ul>
<!-- Mobile menu (hidden by default) - A JavaScript toggle would be needed for this -->
<ul class="md:hidden flex-col items-center mt-4 space-y-3 w-full text-lg" id="mobile-menu-items">
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Overview
</a>
</li>
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Analytics
</a>
</li>
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Reports
</a>
</li>
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Settings
</a>
</li>
</ul>
</div>
</nav>Componenti correlati
Navigazione sui social media
Un componente di navigazione reattivo per i social media con una combinazione di colori tenui/desaturati, ispirato ai principi del Material Design, che supporta le modalità chiara e scura. Presenta layout basati su griglia ed effetti di profondità.
Cyberpunk_Food_Nav
Un componente di navigazione semplice e reattivo a tema cyberpunk per siti Web di cibo/ristoranti, con sfondi scuri, accenti al neon e supporto per la modalità oscura.
Componente di navigazione 43
Un componente di navigazione reattivo che segue i principi del design scheumorfico, con elementi digitali che imitano le loro controparti del mondo reale, con supporto per temi scuri.