Composants Navigation dans la barre latérale Composant de navigation dans la barre latérale

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.

Aperçu

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

Une navigation complexe et réactive dans la barre latérale Glassmorphism pour un tableau de bord avec un schéma de couleurs complémentaire, la prise en charge du mode sombre et aucun JavaScript.

Ouvrir