Componente di navigazione della barra laterale
Un componente di navigazione della barra laterale reattivo progettato in stile Brutalismo, perfetto per le applicazioni di e-commerce. Presenta colori vivaci, contrasto elevato e molteplici elementi interattivi, inclusi collegamenti a diverse categorie di shopping, opzioni di account utente e un vivace pulsante di invito all'azione per l'accesso al carrello. Il design si adatta anche alla modalità oscura.
Codice HTML
<div class="flex flex-col w-64 h-screen p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
<h1 class="text-3xl font-bold text-vibrant-500 dark:text-vibrant-300">Shop Sidebar</h1>
<ul class="mt-6 space-y-4">
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Home</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Products</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Categories</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Deals</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Account</span>
</a>
</li>
</ul>
<div class="mt-6">
<a href="#" class="flex items-center justify-center h-12 bg-vibrant-500 text-white font-bold rounded-lg shadow-lg hover:bg-vibrant-600 transition ease-in-out duration-150">
<span>View Cart</span>
</a>
</div>
<div class="mt-auto">
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8 mr-3">
<span>Profile</span>
</a>
</div>
</div>
Componenti correlati
Componente di navigazione della barra laterale - Agricoltura/Allevamento
Un componente di navigazione della barra laterale complesso e minimalista progettato per siti Web di agricoltura/allevamento. Presenta colori gioiello, reattività completa, supporto per la modalità oscura e molteplici elementi interattivi adatti a dashboard e sistemi di gestione in contesti agricoli.
Gaming_Sidebar_Navigation_Component
Un componente di navigazione reattivo della barra laterale per siti Web di giochi, caratterizzato da un design monospace/ispirato agli sviluppatori con contrasto elevato, supporto per la modalità oscura ed elementi interattivi. Ideale per interfacce di gioco e portali della community.
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.