Barra di navigazione laterale Brutalismo
Componente di navigazione della barra laterale reattiva con design brutalista, combinazione di colori vivaci e layout semplice per uno scopo di blog/contenuto. Include il supporto per la modalità oscura.
Codice HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 px-4 py-6 bg-yellow-400 dark:bg-yellow-700 border-r-4 border-black dark:border-white">
<h2 class="text-2xl font-bold text-black dark:text-white">Navigation</h2>
<nav class="mt-8">
<ul>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Home</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Articles</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">About</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- Content Area (for demonstration) -->
<div class="flex-1 p-10">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Main Content Area</h1>
<p class="text-gray-700 dark:text-gray-300">
This is where the main content of your blog or article would go.
The sidebar provides navigation on the left.
</p>
</div>
</div>Componenti correlati
Componente di navigazione della barra laterale
Un componente di navigazione della barra laterale semplice e reattivo con effetti di passaggio del mouse incentrati sulla microinterazione, progettato per siti Web governativi/di servizio pubblico. Dispone di una combinazione di colori analoga e del supporto per la modalità scura.
Componente di navigazione della barra laterale dei social media
Componente di navigazione reattivo della barra laterale dei social media con supporto del tema scuro utilizzando i principi di brutalismo, toni della terra e design complesso. Non è necessario JavaScript.
Navigazione nella barra laterale di Glassmorphism
Un componente di navigazione della barra laterale reattivo con design Glassmorphism, supporto per la modalità oscura e utilizzo di Tailwind CSS. Presenta elementi traslucidi simili al vetro smerigliato con effetti di sfocatura.