Composant du menu Hamburger
Un composant de menu Hamburger réactif conçu dans le style Brutalism à l’aide de Tailwind CSS, avec prise en charge du mode sombre et des espaces réservés pour les images et les avatars.
HTML Code
<div class="flex items-center justify-between p-5 bg-gray-800 text-white">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-3">
<span class="text-2xl font-bold">Brutalism Menu</span>
</div>
<div class="lg:hidden">
<button id="menu-toggle" class="flex items-center justify-center h-10 w-10 rounded-md bg-gray-600 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-200">
<svg class="w-6 h-6 text-white" 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 12h16m-7 6h7" /></svg>
</button>
</div>
<div class="hidden lg:flex space-x-4">
<a href="#" class="font-semibold hover:text-gray-400">Home</a>
<a href="#" class="font-semibold hover:text-gray-400">About</a>
<a href="#" class="font-semibold hover:text-gray-400">Services</a>
<a href="#" class="font-semibold hover:text-gray-400">Contact</a>
</div>
</div>
<div id="menu" class="lg:hidden bg-gray-900 text-white fixed top-0 left-0 w-full h-full z-50 hidden">
<div class="flex flex-col items-center justify-center h-full space-y-4">
<a href="#" class="text-lg font-bold hover:text-gray-400">Home</a>
<a href="#" class="text-lg font-bold hover:text-gray-400">About</a>
<a href="#" class="text-lg font-bold hover:text-gray-400">Services</a>
<a href="#" class="text-lg font-bold hover:text-gray-400">Contact</a>
<button class="mt-6 h-10 w-10 bg-red-600 hover:bg-red-500 rounded-full">
<svg class="w-6 h-6 text-white" 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="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 { background-color: #1a1a1a; }
.bg-gray-900 { background-color: #121212; }
}
</style>Composants associés
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.
Skeuomorphic Hamburger Menu
Un composant de menu hamburger réactif conçu avec des éléments skeuomorphes, des couleurs vives et une prise en charge du thème sombre pour les sites de commerce électronique.
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.