Composant de navigation dans la barre latérale
Un composant de navigation de barre latérale réactif avec des éléments de conception 3D, une palette de couleurs analogue et une complexité moyenne avec des fonctionnalités interactives. Convient aux blogs ou aux sites Web de contenu.
HTML Code
<!-- Responsive Sidebar Navigation Component -->
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-900 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out shadow-lg">
<div class="text-white flex items-center justify-between px-4">
<span class="text-2xl font-extrabold italic">Blog Menu</span>
<!-- Mobile menu button -->
<button class="text-white focus:outline-none md:hidden" onclick="document.querySelector('.translate-x-full').classList.toggle('translate-x-full');">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<!-- Nav Links -->
<nav>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
<i class="fas fa-home mr-3"></i> Home
</a>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
<i class="fas fa-th-large mr-3"></i> Categories
</a>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
<i class="fas fa-bookmark mr-3"></i> Bookmarks
</a>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
<i class="fas fa-user mr-3"></i> Profile
</a>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md">
<i class="fas fa-cog mr-3"></i> Settings
</a>
</nav>
<!-- Footer/User Info (Optional) -->
<div class="absolute inset-x-0 bottom-0 p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white mr-3">
<div class="text-sm">
<p class="font-semibold">John Doe</p>
<p class="text-gray-200 dark:text-gray-400">View Profile</p>
</div>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="flex-1 p-10 text-2xl font-bold">
<!-- Your main content goes here -->
Main Content
</div>
</div>Composants associés
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.
Volet de navigation dans la barre latérale - Agriculture/Agriculture
Un composant de navigation latéral complexe et minimaliste conçu pour les sites Web agricoles. Comprend des couleurs aux tons de bijou, une réactivité totale, la prise en charge du mode sombre et de multiples éléments interactifs adaptés aux tableaux de bord et aux systèmes de gestion dans les contextes agricoles.
RetroBarre latéraleNavigation
Un composant de navigation dans la barre latérale de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.