Composant de navigation Material Design
Un composant de navigation Material Design simple et réactif pour les interfaces de médias sociaux à l’aide d’un schéma de couleurs en niveaux de gris. Dispose d’une mise en page épurée avec logo, liens de navigation, barre de recherche et avatar de l’utilisateur. Inclut la prise en charge du mode sombre à l’aide du préfixe dark : de Tailwind.
HTML Code
<!-- Material Design Navigation Component for Social Media -->
<nav class="w-full bg-white dark:bg-gray-900 shadow-md transition-colors duration-200">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between items-center h-16">
<!-- Logo and Brand -->
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-gray-800 dark:text-white font-medium text-xl">SocialConnect</span>
</div>
<!-- Desktop Navigation Links -->
<div class="hidden md:block ml-10">
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Explore</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Messages</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Notifications</a>
</div>
</div>
</div>
<!-- Search Bar -->
<div class="hidden md:block flex-1 max-w-xs mx-4">
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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>
<input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-gray-100 dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-sm text-gray-900 dark:text-white transition-colors duration-200" placeholder="Search">
</div>
</div>
<!-- Right side - User profile and mobile menu button -->
<div class="flex items-center">
<!-- User Avatar -->
<div class="ml-3 flex items-center">
<div class="relative">
<img class="h-8 w-8 rounded-full ring-2 ring-gray-200 dark:ring-gray-700" src="https://randomuser.me/api/portraits/women/72.jpg" alt="User avatar">
<span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-1 ring-white dark:ring-gray-800 bg-green-400"></span>
</div>
</div>
<!-- Mobile menu button -->
<button type="button" class="md:hidden ml-4 inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors duration-200">
<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>
<!-- Mobile Search Bar (visible on mobile only) -->
<div class="md:hidden py-2">
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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>
<input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-gray-100 dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-sm text-gray-900 dark:text-white transition-colors duration-200" placeholder="Search">
</div>
</div>
</div>
<!-- Mobile Navigation Menu (hidden by default) -->
<div class="hidden md:hidden bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800">Home</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Explore</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Messages</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Notifications</a>
</div>
</div>
</nav>Composants associés
Composant de navigation 3D
Un composant de navigation 3D réactif conçu pour le commerce électronique, avec une palette de couleurs en niveaux de gris et la prise en charge du mode sombre.
Composant de navigation skeuomorphe
Un composant de navigation conçu dans un style skeuomorphe, avec des couleurs vives et une mise en page réactive adaptée au contenu du blog. Il comprend des fonctionnalités interactives telles que des effets de survol et est optimisé pour le mode sombre.
Barre de navigation dégradée vitreuse
Cette barre de navigation présente un design moderne et vitreux, combinant des couleurs dégradées et un effet de verre dépoli pour maintenir un effet translucide lors du défilement.