Composant de navigation collante
Un composant de navigation autocollant réactif avec un design minimaliste, une palette de couleurs triadique et une prise en charge du thème sombre, adapté aux applications de médias sociaux.
HTML Code
<nav class="sticky top-0 bg-white dark:bg-gray-800 p-4 shadow-md z-50">
<div class="container mx-auto flex justify-between items-center">
<!-- Logo/Brand Name -->
<a href="#" class="text-blue-500 dark:text-blue-300 text-2xl font-bold">SocialLink</a>
<!-- Navigation Links -->
<div class="flex space-x-6">
<a href="#" class="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500 transition duration-300">Feed</a>
<a href="#" class="text-violet-500 dark:text-violet-300 hover:text-violet-700 dark:hover:text-violet-500 transition duration-300">Profile</a>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-500 transition duration-300">Messages</a>
<a href="#" class="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500 transition duration-300">Notifications</a>
</div>
<!-- Search Bar (Optional) -->
<div class="hidden md:block">
<input type="text" placeholder="Search..." class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<!-- User Avatar (Optional) -->
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-300">
<span class="text-gray-700 dark:text-gray-300 hidden sm:block">John Doe</span>
</div>
</div>
</nav>Composants associés
Composant de navigation collante
Un composant de navigation autocollant au design plat minimaliste avec une palette de couleurs monochromatique pour les sites Web d’entreprise. La conception comprend plusieurs éléments interactifs et prend en charge le thème sombre.
Skeuomorphe en niveaux de gris Sticky Nav
Une barre de navigation autocollante réactive pour les blogs, stylisée avec un skeuomorphisme à l’aide d’une palette en niveaux de gris. Dispose d’une prise en charge du mode sombre et d’une mise en page simple. Construit avec Tailwind CSS (HTML uniquement), pas de JavaScript. Le design skeuomorphe vise à faire apparaître la barre de navigation comme un élément physique, légèrement en relief.
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.