Componentes Menú de hamburguesas Componente del menú de hamburguesas

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.

Vista previa

Código HTML

<nav class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="relative flex items-center justify-between h-16">
            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                <!-- Hamburger Icon -->
                <button id="menu-toggle" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800 focus:ring-white" aria-expanded="false" aria-label="Main menu">
                    <span class="sr-only">Open main menu</span>
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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 class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                <div class="flex-shrink-0">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
                </div>
                <div class="hidden sm:block">
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                        <a href="#portfolio" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Portfolio</a>
                        <a href="#about" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
                        <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- Menu Items -->
<div id="menu" class="hidden sm:hidden bg-white dark:bg-gray-800">
    <div class="px-2 pt-2 pb-3 space-y-1">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
        <a href="#portfolio" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Portfolio</a>
        <a href="#about" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
        <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
</div>

<main class="p-6">
    <h1 class="text-center text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/200" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 1</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 1.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/201" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 2</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 2.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/202" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 3</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 3.</p>
            </div>
        </div>
    </div>
</main>

Componentes relacionados

Menú de hamburguesas Componente 19

Un componente esquelético del menú de hamburguesas diseñado en estilo skeuomórfico, que imita elementos del mundo real. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.

Abrir

Menú de hamburguesas orgánicas en escala de grises

Un componente de menú de hamburguesas receptivo con un estilo de diseño orgánico y fluido que utiliza una combinación de colores en escala de grises. Ideal para documentación o sitios wiki, con soporte para modo oscuro y un efecto de transición suave para el cambio de menú.

Abrir

Componente del menú de hamburguesas

Un componente de menú de hamburguesas receptivo diseñado con un estilo 3D, adecuado para fines de tablero. Incorpora un esquema de color triádico y tiene una interfaz compleja con elementos interactivos, que admite temas claros y oscuros.

Abrir