Composant de navigation collante
Composant de navigation autocollant réactif avec mode sombre
HTML Code
<nav class="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-50">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700 dark:text-white">Social Site</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
</div>
<div class="md:hidden">
<button class="mobile-menu-button text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
<svg class="h-6 w-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 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<div class="mobile-menu hidden md:hidden mt-2">
<a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
<a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Profile</a>
<a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Messages</a>
</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
Barre de navigation autocollante minimaliste et réactive pour un site Web météo/climat, avec des couleurs neutres froides, la prise en charge du mode sombre et des éléments interactifs. Conçu pour une complexité moyenne avec des liens fonctionnels et une barre de recherche.
Composant de navigation collante
Une barre de navigation autocollante minimaliste et réactive pour les blogs, avec une palette de couleurs vives. Il prend en charge le mode sombre et a une mise en page simple et propre avec « Titre du blog » à gauche et des liens de navigation à droite. La barre de navigation se colle en haut de la fenêtre d’affichage lorsque l’utilisateur fait défiler la page.