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
Brutalisme Hamburger Menu
Composant de menu Hamburger inspiré du brutalisme pour le tableau de bord avec une palette de couleurs analogue, une complexité modérée, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.
Composant du menu Hamburger
Un composant de menu hamburger complexe, réactif et dynamique avec des micro-interactions pour le commerce électronique, avec une navigation coulissante, des liens de catégorie, une barre de recherche et des icônes de médias sociaux. Il prend en charge le mode sombre et utilise Lorem Picsum pour les images.
Composant du menu Hamburger
Un composant de menu hamburger réactif conçu pour une utilisation sur le tableau de bord, stylisé dans un design 3D avec une palette de couleurs en niveaux de gris, adapté aux thèmes clairs et sombres.