Componente de navegación de comercio electrónico brutalista
Un componente de navegación de comercio electrónico complejo y brutalista que utiliza Tailwind CSS, con un esquema de color triádico (amarillo, cian, fucsia) con alto contraste (blanco / negro), un megamenú solo CSS, revelación de búsqueda solo CSS, un menú móvil responsivo solo CSS y soporte de modo oscuro. Solo HTML, sin JavaScript.
Código HTML
<nav class="bg-yellow-400 text-black border-b-8 border-black dark:bg-black dark:text-yellow-400 dark:border-yellow-400">
<div class="container mx-auto px-4 relative">
<!-- Checkbox for Mobile Menu State - Controls the mobile menu visibility -->
<input type="checkbox" id="mobile-menu-toggle" class="hidden peer">
<!-- Main Row: Logo, Desktop Nav, Mobile Toggle Label -->
<!-- This div is a sibling of the checkbox -->
<div class="flex justify-between items-center py-6">
<!-- Logo -->
<div class="text-3xl font-black uppercase tracking-widest border-4 border-black p-2 dark:border-yellow-400">
<a href="#" class="hover:text-fuchsia-500 transition duration-300">BRUTAL SHOP</a>
</div>
<!-- Desktop Navigation & Icons (Hidden on Mobile) -->
<div class="hidden md:flex items-center space-x-8">
<ul class="flex items-center space-x-8 uppercase font-bold">
<!-- Categories with CSS-only Mega-Menu -->
<li class="relative group">
<a href="#" class="hover:text-fuchsia-500 focus:outline-none focus:text-fuchsia-500">Categories</a>
<!-- Mega-Menu Content (CSS-only via group-hover) -->
<div class="absolute left-0 top-full mt-2 w-64 bg-cyan-500 text-black p-6 border-4 border-black opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-10 dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
<h4 class="font-black mb-3 border-b-4 border-black dark:border-cyan-500">Shop By Category</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:underline">Electronics</a></li>
<li><a href="#" class="hover:underline">Apparel</a></li>
<li><a href="#" class="hover:underline">Home Goods</a></li>
<li><a href="#" class="hover:underline">Books</a></li>
</ul>
</div>
</li>
<li><a href="#" class="hover:text-fuchsia-500">New Arrivals</a></li>
<li><a href="#" class="hover:text-fuchsia-500">Deals</a></li>
</ul>
<!-- User Icons, Search, Cart -->
<div class="flex items-center space-x-6 text-2xl">
<!-- Search Toggle/Input (CSS-only reveal on hover/focus) -->
<div class="relative group">
<svg class="w-6 h-6 cursor-pointer hover:text-fuchsia-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
<!-- Simple search input reveal on hover/focus -->
<input type="text" placeholder="Search..." class="absolute right-0 top-full mt-2 px-3 py-2 w-48 border-4 border-black bg-white text-black opacity-0 invisible group-hover:opacity-100 group-hover:visible focus:opacity-100 focus:visible transition-all duration-300 z-10 dark:bg-black dark:text-yellow-400 dark:border-yellow-400">
</div>
<!-- User Icon -->
<a href="#" class="hover:text-fuchsia-500">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
</a>
<!-- Wishlist Icon -->
<a href="#" class="hover:text-fuchsia-500">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
</a>
<!-- Cart Icon with Count -->
<a href="#" class="relative hover:text-fuchsia-500">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
<span class="absolute -top-2 -right-2 bg-fuchsia-500 text-black text-xs font-bold px-1 rounded-full border-2 border-black dark:border-yellow-400">3</span>
</a>
</div>
</div>
<!-- Mobile Menu Toggle Label (Visible on Mobile) -->
<!-- This label controls the hidden checkbox peer -->
<label for="mobile-menu-toggle" class="md:hidden block cursor-pointer p-2 relative z-20">
<!-- Hamburger Icon - Spans styled based on the peer-checked state of the checkbox -->
<div class="space-y-2 peer-checked:space-y-0 peer-checked:rotate-45 transition-transform duration-300">
<span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:rotate-90 peer-checked:translate-y-1.5 transition-transform duration-300"></span>
<span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:opacity-0 transition-opacity duration-300"></span>
<span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:-rotate-90 peer-checked:-translate-y-1.5 transition-transform duration-300"></span>
</div>
</label>
</div>
<!-- Mobile Menu Content -->
<!-- This div is a sibling of the checkbox and the main row div -->
<!-- Its visibility is controlled by the peer-checked state of the checkbox -->
<div id="mobile-menu" class="md:hidden absolute top-[theme(spacing.20)] left-0 w-full bg-cyan-500 text-black border-t-8 border-black opacity-0 invisible transition-all duration-300 z-10 peer-checked:opacity-100 peer-checked:visible dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
<div class="px-4 py-6 space-y-6">
<!-- Search Input - Mobile -->
<div>
<input type="text" placeholder="Search..." class="px-3 py-2 w-full border-4 border-black bg-white text-black dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
</div>
<!-- Mobile Links -->
<ul class="space-y-4 uppercase font-bold text-xl">
<li><a href="#" class="block hover:text-fuchsia-500">Categories</a></li>
<li><a href="#" class="block hover:text-fuchsia-500">New Arrivals</a></li>
<li><a href="#" class="block hover:text-fuchsia-500">Deals</a></li>
<li><a href="#" class="block hover:text-fuchsia-500">Account</a></li>
<li><a href="#" class="block hover:text-fuchsia-500">Wishlist</a></li>
<li><a href="#" class="flex items-center hover:text-fuchsia-500">
Cart <span class="ml-2 bg-fuchsia-500 text-black text-xs font-bold px-1 rounded-full border-2 border-black dark:border-cyan-500">3</span>
</a></li>
</ul>
</div>
</div>
</div>
</nav>Componentes relacionados
Componente de navegación del panel de control retro
Componente de navegación retro/vintage para tablero con colores vibrantes, complejidad moderada, capacidad de respuesta y compatibilidad con temas oscuros.
Componente de navegación de redes sociales
Un componente de navegación responsivo diseñado para interfaces de redes sociales, con una estética de Material Design que utiliza un tema oscuro con Tailwind CSS.
Componente de navegación de Material Design
Un componente de navegación de Material Design simple y receptivo para interfaces de redes sociales que utiliza un esquema de color en escala de grises. Presenta un diseño limpio con logotipo, enlaces de navegación, barra de búsqueda y avatar de usuario. Incluye soporte para el modo oscuro usando el prefijo dark: de Tailwind.