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.
HTML Code
<nav class="bg-gray-900 dark:bg-black text-lime-400 font-mono fixed w-full top-0 z-50 shadow-lg">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo/Brand Section -->
<div class="flex items-center space-x-2">
<svg class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M4 8h16M4 16h16" />
</svg>
<span class="text-xl font-bold uppercase tracking-wider">CodeStream</span>
</div>
<!-- Desktop Navigation Links -->
<div class="hidden md:flex space-x-8">
<a href="#" class="hover:text-white transition duration-300">Discover</a>
<a href="#" class="hover:text-white transition duration-300">Browse</a>
<a href="#" class="hover:text-white transition duration-300">Live</a>
<a href="#" class="hover:text-white transition duration-300">Community</a>
</div>
<!-- Mobile Menu Button (Hamburger Icon) -->
<div class="md:hidden">
<button class="text-lime-400 focus:outline-none focus:text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<!-- Mobile Navigation (hidden by default, would be toggled by JS) -->
<div class="hidden md:hidden bg-gray-800 dark:bg-gray-950 pb-2">
<div class="flex flex-col items-center space-y-2 py-2">
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Discover</a>
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Browse</a>
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Live</a>
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Community</a>
</div>
</div>
</nav>Composants associés
Brutalisme Navigation collante
Un composant de navigation autocollant complexe avec un design brutaliste, une palette de couleurs monochromatiques, conçu pour les portfolios, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Cyberpunk Navigation collante
Une barre de navigation réactive et collante au style cyberpunk, aux tons crépuscules/chauds, adaptée aux interfaces finance/banque. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant de navigation collante
Un composant de navigation autocollant conçu pour le mode sombre avec des effets réactifs utilisant Tailwind CSS.