Navegación pegajosa (glassmorphism)
Componente de navegación pegajoso con estilo Glassmorphism, responsivo y soporte de tema oscuro.
Código HTML
<nav class="sticky top-0 z-10 backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0">
<span class="text-2xl font-semibold text-gray-900 dark:text-white">Glassmorphism Nav</span>
</div>
<div class="hidden md:block">
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="bg-gray-100 dark:bg-gray-700 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-200 dark:hover:text-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
<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" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Services</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
</div>
</div>
</nav>Componentes relacionados
Componente de navegación pegajosa
Un componente de navegación pegajoso de diseño plano minimalista con un esquema de color monocromático para sitios web comerciales / corporativos. El diseño incluye múltiples elementos interactivos y admite el tema oscuro.
Navegación pegajosa skeuomórfica en escala de grises
Una barra de navegación pegajosa y receptiva para blogs, diseñada con esqueuomorfismo utilizando una paleta en escala de grises. Cuenta con soporte para modo oscuro y un diseño simple. Construido con Tailwind CSS (solo HTML), sin JavaScript. El diseño skeuomórfico tiene como objetivo hacer que la barra de navegación parezca un elemento físico ligeramente elevado.
Componente de navegación pegajosa
Un componente de navegación pegajoso de estilo brutalista adecuado para interfaces de redes sociales, con un diseño audaz y de alto contraste y compatibilidad con el modo oscuro.