Composant du menu Hamburger
Composant de menu Hamburger réactif avec mode sombre
HTML Code
<nav class="bg-stone-100 dark:bg-stone-800 shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
<!-- Website Logo -->
<a href="#" class="flex items-center py-4 px-2">
<span class="text-stone-500 dark:text-white text-lg font-semibold">Your Logo</span>
</a>
</div>
<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-1">
<a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Home</a>
<a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Services</a>
<a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">About</a>
<a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Contact Us</a>
</div>
</div>
<!-- Secondary Navbar items -->
<div class="hidden md:flex items-center space-x-3 ">
<a href="" class="py-2 px-2 font-medium text-stone-500 dark:text-white rounded hover:bg-green-500 hover:text-white transition duration-300">Log In</a>
<a href="" class="py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300">Sign Up</a>
</div>
<!-- Mobile menu button -->
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<svg class="w-6 h-6 text-stone-500 dark:text-white hover:text-green-500" x-show="!showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg class="w-6 h-6 text-stone-500 dark:text-white hover:text-green-500" x-show="showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="hidden mobile-menu">
<ul class="">
<li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Home</a></li>
<li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Services</a></li>
<li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">About</a></li>
<li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Contact Us</a></li>
</ul>
</div>
</nav>Composants associés
Composant du menu Hamburger
Un composant de menu de hamburger complexe, inspiré du papier/de l’impression avec des couleurs bonbons/sucrées, conçu pour les sites Web gouvernementaux/de services publics. Dispose d’un design réactif avec prise en charge du mode sombre, imitant le papier physique et les éléments d’impression avec des couleurs vives et gaies.
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 de menu de hamburger pour l’alimentation/le restaurant (Memphis pastel)
Un composant de menu de hamburger simple et réactif pour les sites Web de nourriture/restaurant, avec une esthétique Memphis Design avec des couleurs pastel. Inclut la prise en charge du mode sombre.