Composant du menu Hamburger
Un composant de menu hamburger réactif conçu dans le style Material Design avec prise en charge du thème sombre, adapté à la navigation dans le tableau de bord.
HTML Code
<div class="bg-gray-800 text-white h-screen flex flex-col">
<div class="flex justify-between items-center p-5">
<div class="text-2xl font-bold">Dashboard</div>
<button id="menu-toggle" class="focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div id="menu" class="hidden bg-gray-700 p-4 rounded-lg shadow-lg">
<ul class="space-y-2">
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Home</a></li>
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Profile</a></li>
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Settings</a></li>
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Logout</a></li>
</ul>
</div>
<div class="flex-1 p-5">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
<div class="text-xl font-semibold">Card Title 1</div>
<p class="text-gray-400">Some descriptive text for this card.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
<div class="text-xl font-semibold">Card Title 2</div>
<p class="text-gray-400">Some descriptive text for this card.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=3" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
<div class="text-xl font-semibold">Card Title 3</div>
<p class="text-gray-400">Some descriptive text for this card.</p>
</div>
</div>
</div>
</div>Composants associés
Composant du menu Hamburger
Un composant de menu hamburger réactif au design brutaliste, avec un contraste élevé, des styles audacieux et une prise en charge du mode sombre.
Composant du menu Hamburger
Un composant de menu de hamburger réactif inspiré de Memphis Design avec une palette de couleurs sépia/marron, adapté aux plateformes de divertissement/médias. Il comprend la prise en charge du mode sombre et des accents géométriques ludiques.
Menu Hamburger bio en niveaux de gris
Un composant de menu hamburger réactif avec un style de conception organique et fluide utilisant une palette de couleurs en niveaux de gris. Idéal pour la documentation ou les sites wiki, avec prise en charge du mode sombre et un effet de transition en douceur pour la bascule du menu.