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 dans la barre latérale conçu pour les blogs, conçu avec des éléments 3D et des couleurs vives. Prend en charge le mode sombre et est réactif, avec une mise en page simple adaptée à la consommation de contenu.

Aperçu

HTML Code

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
            </a>
        </li>
    </ul>
</div>

Composants associés

Composant de navigation dans la barre latérale - Niveaux de gris

Composant de navigation dans la barre latérale réactive

Ouvrir

Navigation dans la barre latérale du commerce électronique

Un composant de navigation de barre latérale simple et réactif pour les sites Web de commerce électronique, doté d’un schéma de couleurs triadique, de micro-interactions au survol et de la prise en charge du mode sombre, conçu avec Tailwind CSS.

Ouvrir

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.

Ouvrir