Playful_Consulting_Navigation_Component
Un composant de navigation simple, ludique et joyeux pour le conseil/les services, avec des éléments arrondis, une palette de couleurs monochromes avec un accent vif et une réactivité totale avec la prise en charge du mode sombre.
HTML Code
<nav class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<!-- Logo/Brand Name -->
<a href="#" class="flex items-center space-x-2 rtl:space-x-reverse font-bold text-2xl text-gray-900 dark:text-white">
<svg class="w-8 h-8 text-indigo-500" 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="M12 6V4m0 2a2 2 0 00-2 2v2a2 2 0 002 2 2 2 0 002-2V8a2 2 0 00-2-2zm0 6a2 2 0 00-2 2v2a2 2 0 002 2 2 2 0 002-2v-2a2 2 0 00-2-2z">
</path>
</svg>
<span>BrightConsult</span>
</a>
<!-- Mobile Menu Button (Hamburger) -->
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
<!-- Navigation Links -->
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About Us</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-white bg-indigo-500 rounded-full hover:bg-indigo-600 md:ml-4 transition-colors duration-200">Get Started</a>
</li>
</ul>
</div>
</div>
</nav>
<script>
// Basic JavaScript for toggling mobile menu
document.addEventListener('DOMContentLoaded', function() {
const button = document.querySelector('[data-collapse-toggle="navbar-default"]');
const menu = document.getElementById('navbar-default');
if (button && menu) {
button.addEventListener('click', function() {
const expanded = this.getAttribute('aria-expanded') === 'true' || false;
this.setAttribute('aria-expanded', !expanded);
menu.classList.toggle('hidden');
});
}
});
</script>Composants associés
Composants d’amélioration de la navigation
Un composant de navigation conçu avec une esthétique brutaliste, avec des designs audacieux, un contraste élevé et des mises en page inhabituelles. Il comprend des effets réactifs et prend en charge les thèmes sombres avec CSS.
Composant d’amélioration de la navigation
Un composant de navigation réactif conçu dans le style Material Design à l’aide de Tailwind CSS, avec prise en charge du thème sombre et des effets réactifs.
Composant d’amélioration de la navigation
Un composant de navigation inspiré du glassmorphisme conçu pour présenter des travaux et des produits de portfolio avec prise en charge des tons de terre et du mode sombre. Le composant présente un effet de verre givré, un design réactif et des éléments minimaux.