Componentes Componentes de navegación Componente de navegación 43

Componente de navegación 43

Un componente de navegación responsivo que sigue los principios de diseño skeuomórfico, con elementos digitales que imitan a sus contrapartes del mundo real, con soporte para temas oscuros.

Vista previa

Código HTML

<nav class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg p-4">
    <div class="flex justify-between items-center">
        <a href="#" class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-lg font-bold text-gray-800 dark:text-gray-200">MyApp</span>
        </a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Services</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">
                <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
            </button>
        </div>
    </div>
    <div class="mt-2 md:hidden">
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Home</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">About</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Services</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Contact</a>
    </div>
</nav>

Componentes relacionados

Componente de navegación

Un componente de navegación responsivo diseñado con microinteracciones y con animaciones atractivas basadas en las acciones del usuario, que admite temas claros y oscuros. El componente incluye avatar de perfil, enlaces de navegación y efectos de desplazamiento.

Abrir

Componente de navegación skeuomórfica

Un componente de navegación diseñado con estilo skeuomórfico, con una combinación de colores complementaria, adecuada para un tablero con visualización de datos y paneles de control. Incluye elementos interactivos para la participación del usuario.

Abrir

Componente de componentes de navegación

Glassmorphism Monocromático Moderado Componente de navegación de comercio electrónico con soporte de modo oscuro

Abrir