Menú de hamburguesas brutalismo
Componente de menú de hamburguesa inspirado en el brutalismo para el tablero con esquema de color análogo, complejidad moderada, diseño receptivo y soporte de tema oscuro con Tailwind CSS. Sin JavaScript.
Código HTML
<div class="bg-gray-200 dark:bg-gray-800 font-mono">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="text-xl font-bold text-gray-900 dark:text-gray-100">Dashboard</div>
<button class="text-gray-900 dark:text-gray-100 focus:outline-none lg:hidden">
<svg class="h-6 w-6" 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-4 6h4"></path>
</svg>
</button>
</div>
<div class="hidden lg:block mt-4">
<nav class="flex space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Analytics</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Reports</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Settings</a>
</nav>
</div>
</div>
<!-- Mobile Menu (Hidden by default) -->
<div class="fixed inset-0 bg-gray-200 dark:bg-gray-800 z-50 hidden">
<div class="flex justify-end p-4">
<button class="text-gray-900 dark:text-gray-100 focus:outline-none">
<svg class="h-6 w-6" 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"></path>
</svg>
</button>
</div>
<nav class="flex flex-col items-center mt-8 space-y-4">
<a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
<a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Analytics</a>
<a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Reports</a>
<a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Settings</a>
</nav>
</div>
</div>Componentes relacionados
Menú de hamburguesas Glassmorphism
Un componente de menú de hamburguesas simple y receptivo con diseño Glassmorphism, combinación de colores complementaria y compatibilidad con el modo oscuro.
Componente del menú de hamburguesas
Un componente receptivo del menú de hamburguesas diseñado en estilo brutalismo con una combinación de colores pastel. Adecuado para un portafolio que exhibe trabajos o productos.
Componente del menú de hamburguesas
Un componente de menú de hamburguesas complejo, receptivo y vibrante con microinteracciones para el comercio electrónico, con una navegación deslizable, enlaces de categoría, una barra de búsqueda e íconos de redes sociales. Es compatible con el modo oscuro y utiliza Lorem Picsum para las imágenes.