Componentes Componentes de navegación Componentes de navegación

Componentes de navegación

Un componente de navegación responsivo con microinteracciones y soporte para temas oscuros, diseñado con Tailwind CSS.

Vista previa

Código HTML

<nav class="bg-white dark:bg-gray-800 shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <div class="flex-shrink-0">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            </div>
            <div class="hidden md:block">
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                        Home
                    </a>
                    <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                        About
                    </a>
                    <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                        Services
                    </a>
                    <a href="#" class="text-gray-900 dark:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                        Contact
                    </a>
                </div>
            </div>
            <div class="-mr-2 flex md:hidden">
                <button class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                    <span class="sr-only">Open main menu</span>
                    <svg class="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>
    </div>
    <div class="md:hidden">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                Home
            </a>
            <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                About
            </a>
            <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                Services
            </a>
            <a href="#" class="text-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out">
                Contact
            </a>
        </div>
    </div>
</nav>

Componentes relacionados

Componente de componentes de navegación

Un componente de navegación responsivo con colores vibrantes y microinteracciones, diseñado para una cartera.

Abrir

Componente de navegación de redes sociales

Un componente de navegación simple y receptivo para aplicaciones de redes sociales, con un tema oscuro y un esquema de color complementario inspirado en Material Design. Incluye un logotipo, enlaces de navegación y un avatar de usuario.

Abrir

JobBoardNavigation

Un componente de navegación simple y receptivo para una bolsa de trabajo o una plataforma de desarrollo profesional, con tonos océano/azul, microinteracciones al pasar el cursor y compatibilidad con el modo oscuro.

Abrir