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 skeuomorphe pour un tableau de bord aux couleurs pastel et au design minimaliste.
Menu Art Déco pour le sport/fitness
Un composant de menu de hamburger complexe et réactif avec une esthétique Art déco, une palette de couleurs pastel et une prise en charge du mode sombre, adapté aux applications de sport et de fitness.
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.