Composant de navigation dans la barre latérale
Un composant de navigation latéral réactif conçu dans le style Brutalism, parfait pour les applications de commerce électronique. Il présente des couleurs vives, un contraste élevé et de multiples éléments interactifs, notamment des liens vers différentes catégories d’achat, des options de compte utilisateur et un bouton d’appel à l’action dynamique pour l’accès au panier. Le design s’adapte également au mode sombre.
HTML Code
<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>
Composants associés
Glassmorphism Navigation latérale
Un composant de navigation de barre latérale réactif avec un design Glassmorphism, la prise en charge du mode sombre et l’utilisation de Tailwind CSS. Comporte des éléments translucides givrés ressemblant à du verre avec des effets de flou.
Glassmorphism Navigation latérale
Un composant de navigation latérale réactif de style Glassmorphism pour les portfolios, avec prise en charge du mode sombre et un schéma de couleurs analogue. Comprend des effets de verre dépoli et plusieurs éléments interactifs utilisant uniquement HTML et Tailwind CSS.
Composant de navigation dans la barre latérale - Memphis en sourdine
Un composant de navigation latéral complexe et réactif inspiré du design de Memphis avec une palette de couleurs sourdes, adapté à la documentation et aux sites wiki. Comprend la prise en charge du mode sombre et des éléments interactifs.