Composant de navigation dans la barre latérale - Niveaux de gris
Composant de navigation dans la barre latérale réactive
HTML Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-white dark:bg-gray-800 shadow-lg">
<div class="flex items-center justify-center h-16 shadow-md">
<span class="text-xl font-semibold text-gray-700 dark:text-white">Company Name</span>
</div>
<div class="flex flex-col flex-1 overflow-y-auto">
<nav class="flex-1 px-2 py-4 bg-gray-200 dark:bg-gray-700">
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 mr-2" 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>
Dashboard
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 mr-2" 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
Projects
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 mr-2" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Team
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 mr-2" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.23-.14.447-.297.66-.48z"></path></svg>
Settings
</a>
</nav>
</div>
</div>
<!-- Main content (placeholder) -->
<div class="flex flex-col flex-1 overflow-y-auto">
<div class="h-16 bg-white dark:bg-gray-800 shadow-md"></div>
<div class="p-4">
<!-- Your main content goes here -->
</div>
</div>
</div>Composants associés
Composant de navigation dans la barre latérale des médias sociaux
Composant de navigation dans la barre latérale des médias sociaux réactifs avec prise en charge du thème sombre utilisant le brutalisme, les tons de terre et les principes de conception complexes. Aucun JavaScript n’est nécessaire.
Glassmorphism Sidebar Navigation Component
Un composant de navigation de la barre latérale de style Glassmorphism pour les blogs, avec une palette de couleurs monochromatiques. Il s’agit d’un design simple et réactif avec prise en charge du mode sombre, utilisant uniquement HTML et Tailwind CSS. La barre latérale comprend un titre de site, des liens de navigation et une section de profil.
Composant de navigation dans la barre latérale
Composant de navigation latéral complexe et réactif avec une palette de couleurs triadique et des transitions de dégradés, conçu pour une interface de tableau de bord. Comprend la prise en charge du mode sombre et plusieurs éléments interactifs.