Composant de navigation collante
Un composant de navigation autocollant pour le commerce électronique, avec un design minimaliste/plat avec des couleurs vives. Il comprend un logo, une barre de recherche, une icône de panier et un avatar de l’utilisateur, le tout stylisé avec Tailwind CSS pour la réactivité et la prise en charge du thème sombre.
HTML Code
<nav class="sticky top-0 z-50 bg-white dark:bg-gray-900 shadow-md">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo -->
<a href="#" class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">YourStore</a>
<!-- Search Bar (hidden on small screens, shown on medium and up) -->
<div class="hidden md:flex items-center flex-grow mx-4 relative">
<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-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 w-5 h-5" 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>
</div>
<!-- Navigation Icons -->
<div class="flex items-center space-x-4">
<!-- Cart Icon -->
<a href="#" class="relative p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300">
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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 4a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
</a>
<!-- User Avatar -->
<a href="#" class="p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</a>
<!-- Mobile Menu Button (shown on small screens) -->
<button class="md:hidden p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300">
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
<!-- Mobile Search Bar (shown on small screens, hidden on medium and up) -->
<div class="md:hidden px-4 py-2">
<div class="relative">
<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-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 w-5 h-5" 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>
</div>
</div>
</nav>Composants associés
Composant de navigation collante
Un composant de navigation autocollant avec un design skeuomorphe, une palette de couleurs triadique et une mise en page simple, adapté aux interfaces de médias sociaux. Il prend en charge le design réactif et le thème sombre.
Composant de navigation collante
Une barre de navigation autocollante simple, propre et à contraste élevé avec une esthétique monospace/développeur, adaptée aux plateformes de divertissement ou de médias.
Composant de navigation collante
Une barre de navigation réactive et collante avec des effets de néon/lueur, adaptée aux plateformes d’éducation ou d’apprentissage. Dispose d’une palette de couleurs violet/violet, d’une prise en charge du mode sombre et d’éléments de menu interactifs.