Componentes Menú de hamburguesas Componente del menú de hamburguesas

Componente del menú de hamburguesas

Un componente de menú de hamburguesa receptivo diseñado en estilo Material Design con soporte de tema oscuro, adecuado para la navegación en el tablero.

Vista previa

Código HTML

<div class="bg-gray-800 text-white h-screen flex flex-col">
    <div class="flex justify-between items-center p-5">
        <div class="text-2xl font-bold">Dashboard</div>
        <button id="menu-toggle" class="focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" 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 id="menu" class="hidden bg-gray-700 p-4 rounded-lg shadow-lg">
        <ul class="space-y-2">
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Home</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Profile</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Settings</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Logout</a></li>
        </ul>
    </div>
    <div class="flex-1 p-5">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=1" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 1</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=2" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 2</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=3" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 3</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
        </div>
    </div>
</div>

Componentes relacionados

Componente del menú de hamburguesas

Un menú de hamburguesas receptivo diseñado para interfaces de redes sociales con un tema de modo oscuro y una combinación de colores complementaria.

Abrir

Componente del menú de hamburguesas

Un componente de menú de hamburguesas minimalista y receptivo con un esquema de colores de arco iris degradado, diseñado para plataformas de citas/sociales, con soporte para modo oscuro.

Abrir

Componente de menú de hamburguesas 3D

Un menú de hamburguesas receptivo con un diseño 3D que incorpora un esquema de color triádico y elementos interactivos complejos para sitios web comerciales / corporativos.

Abrir