Composants Barre de navigation Composant de la barre de navigation 47

Composant de la barre de navigation 47

Une barre de navigation réactive avec un style de conception 3D, incorporant de la profondeur et de l’engagement, prenant en charge le thème sombre.

Aperçu

HTML Code

<nav class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <div class="flex justify-between items-center"> 
        <div class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-3 shadow-md">
            <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">My Website</h1>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 6h14M3 10h14m-7 4h7" clip-rule="evenodd" /></svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden space-x-4">
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
    </div>
</nav>

Composants associés

Barre de navigation des médias sociaux

Glassmorphism Grayscale Composant simple de la barre de navigation des médias sociaux

Ouvrir

Barre de navigation rétro/vintage pour les réseaux sociaux

Barre de navigation rétro/vintage pour les médias sociaux avec une palette de couleurs analogue, une complexité simple, une prise en charge réactive et un thème sombre.

Ouvrir

3D_Corporate_Blues_Food_Restaurant_Nav

Une barre de navigation complexe, inspirée de la 3D, pour les sites Web de restauration, avec un blues d’entreprise et une réactivité totale avec prise en charge du mode sombre. Intègre des éléments tels qu’un logo, des liens de navigation, une barre de recherche, un avatar d’utilisateur et un panier.

Ouvrir