Catégories

Composants Composants de navigation

Composants de navigation

Composants qui aident les utilisateurs à naviguer sur le site Web et à trouver du contenu

Composant de navigation

Un composant de navigation réactif conçu avec des micro-interactions et proposant des animations attrayantes basées sur les actions de l’utilisateur, prenant en charge les thèmes clairs et sombres. Le composant comprend un avatar de profil, des liens de navigation et des effets de survol.

Ouvrir l’aperçu

                <nav class="bg-white dark:bg-gray-800 shadow-md p-4 rounded-md flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full transition-transform transform hover:scale-110 duration-300">
        <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Website</h1>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">About</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Services</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Contact</a>
    </div>
</nav>

Composante de navigation 43

Un composant de navigation réactif suivant les principes de conception skeuomorphique, avec des éléments numériques qui imitent leurs homologues du monde réel, avec prise en charge du thème sombre.

Ouvrir l’aperçu

                <nav class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg p-4">
    <div class="flex justify-between items-center">
        <a href="#" class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-lg font-bold text-gray-800 dark:text-gray-200">MyApp</span>
        </a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Services</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">
                <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
            </button>
        </div>
    </div>
    <div class="mt-2 md:hidden">
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Home</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">About</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Services</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Contact</a>
    </div>
</nav>