Componentes Barra de navegación Componente de la barra de navegación 47

Componente de la barra de navegación 47

Una barra de navegación receptiva con un estilo de diseño 3D, que incorpora profundidad y compromiso, que admite el tema oscuro.

Vista previa

Código HTML

<nav class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <div class="flex justify-between items-center"> 
        <div class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-3 shadow-md">
            <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">My Website</h1>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 6h14M3 10h14m-7 4h7" clip-rule="evenodd" /></svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden space-x-4">
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
    </div>
</nav>

Componentes relacionados

Componente de la barra de navegación

Un componente de barra de navegación receptivo diseñado en estilo Material Design con un esquema de color triádico, adecuado para interfaces de redes sociales e incluye soporte para temas oscuros.

Abrir

Cyberpunk_Retro_Food_Navbar

Una barra de navegación simple y receptiva con estética cyberpunk-retro, diseñada para sitios web de comida / restaurantes. Cuenta con fondo oscuro, colores de acento apagados y compatibilidad con el modo oscuro.

Abrir

Barra de navegación Skeuomorphic

Un componente de barra de navegación de cartera diseñado con estilos skeuomórficos y una combinación de colores pastel, incluida la compatibilidad con el modo oscuro. Cuenta con elementos interactivos como enlaces y un menú desplegable.

Abrir