Componente Componenti di miglioramento della navigazione
Un componente di navigazione complesso in stile brutalista per siti Web aziendali con combinazione di colori analoga, design reattivo e supporto per la modalità scura. Presenta layout insoliti e contrasto elevato.
Codice HTML
<nav class="bg-blue-200 dark:bg-gray-900 p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center flex-wrap">
<div class="text-xl font-bold text-blue-800 dark:text-blue-200 uppercase tracking-widest">Company Name</div>
<div class="block lg:hidden">
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-blue-800 border-blue-800 dark:text-blue-200 dark:border-blue-200">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="nav-content">
<ul class="lg:flex items-center justify-end flex-1">
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Home</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">About</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Services</a>
</li>
<li class="mr-6 my-2 lg:my-0">
<a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Contact</a>
</li>
<li class="my-2 lg:my-0">
<div class="relative">
<button class="bg-blue-800 dark:bg-blue-200 text-blue-200 dark:text-blue-800 font-bold uppercase py-2 px-4 border border-blue-800 dark:border-blue-200 rounded">
Dropdown
</button>
<div class="absolute right-0 mt-2 w-48 bg-blue-200 dark:bg-gray-700 rounded shadow-lg py-2 z-10 hidden">
<a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 1</a>
<a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 2</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>Componenti correlati
Componenti di miglioramento della navigazione
Un componente di navigazione progettato in 3D con una combinazione di colori analoga, complessità moderata, adatto per la visualizzazione dei dati del cruscotto e i pannelli di controllo.
Componenti di miglioramento della navigazione
Un componente di navigazione progettato con scheumorfismo, con elementi digitali che imitano le controparti del mondo reale. È disegnato utilizzando Tailwind CSS con effetti reattivi e supporto per temi scuri.
Componenti di miglioramento della navigazione
Un componente di miglioramento della navigazione reattiva per un blog in modalità scura con colori vivaci e funzioni di complessità moderata.