E-commerce Navigation industrielle
Un composant complexe de navigation e-commerce de style industriel avec des matériaux bruts et des éléments apparents esthétiques. Dispose d’un schéma monochrome en noir et blanc avec un accent brillant, entièrement réactif avec prise en charge du mode sombre.
HTML Code
<header class="bg-white dark:bg-gray-950 shadow-md border-b-2 border-gray-200 dark:border-gray-800">
<div class="container mx-auto px-4 py-3 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
<!-- Logo/Brand Section -->
<div class="flex items-center flex-shrink-0">
<a href="#" class="text-gray-900 dark:text-white text-3xl font-extrabold tracking-tight uppercase font-mono">
<span class="text-orange-500">PRO</span>DUCTS
</a>
</div>
<!-- Main Navigation & Search -->
<div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 w-full md:w-auto">
<nav class="hidden md:flex space-x-6 lg:space-x-8">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
New Arrivals
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
Categories
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
Sale
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
About Us
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
</a>
</nav>
<div class="relative w-full md:w-80 lg:w-96">
<input type="text" placeholder="Search products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white border-2 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-300 ease-in-out font-sans placeholder-gray-500 dark:placeholder-gray-400">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
<!-- User Actions (Cart, Account, etc.) -->
<div class="flex items-center space-x-6 pl-4 border-l-2 border-gray-200 dark:border-gray-800 hidden lg:flex">
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
</svg>
<span class="sr-only">Account</span>
</a>
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48zM17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
</svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-orange-500 rounded-full">3</span>
<span class="sr-only">Shopping Cart</span>
</a>
<button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
<path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
</svg>
<span class="sr-only">Toggle Dark Mode</span>
</button>
</div>
<!-- Mobile Menu Toggle -->
<div class="md:hidden flex items-center space-x-4">
<button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
<path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
</svg>
<span class="sr-only">Toggle Dark Mode</span>
</button>
<button id="mobile-menu-button" class="text-gray-700 dark:text-gray-300 focus:outline-none focus:text-orange-500 dark:focus:text-orange-500">
<svg class="w-8 h-8" 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 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu (initially hidden) -->
<div id="mobile-menu" class="hidden md:hidden px-4 pt-2 pb-4 space-y-2 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">New Arrivals</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Categories</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Sale</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">About Us</a>
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200 pt-2 border-t border-gray-300 dark:border-gray-700">
<a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
</svg>
Account
</a>
<a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
</svg>
Cart
<span class="ml-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform bg-orange-500 rounded-full">3</span>
</a>
</div>
</div>
</header>
<script>
// Basic JavaScript for mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when a link inside is clicked (optional)
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
}
});
</script>Composants associés
Composants d’amélioration de la navigation
Un composant de navigation de style rétro/vintage conçu pour la consommation de blogs et de contenu avec prise en charge du thème sombre.
Playful_Consulting_Navigation_Component
Un composant de navigation simple, ludique et joyeux pour le conseil/les services, avec des éléments arrondis, une palette de couleurs monochromes avec un accent vif et une réactivité totale avec la prise en charge du mode sombre.
Navigation gouvernementale inspirée du papier et de l’impression
Un composant de navigation complexe, inspiré du papier/de l’impression pour les sites Web gouvernementaux/publics, avec des tons sépia/bruns, une réactivité et une prise en charge du mode sombre. Il comprend la navigation principale, la recherche et une section « liens rapides » ou « services ».