类别

组件导航组件

导航组件

帮助用户在网站上导航并找到内容的组件

导航组件

一个响应式导航组件，设计了微交互，具有基于用户操作的引人入胜的动画，支持明亮和黑暗主题。该组件包括个人头像、导航链接和悬停效果。

                <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>

导航组件 43

一个遵循拟物设计原则的响应式导航组件，具有模拟真实世界对应物的数字元素，支持暗主题。

打开预览

                <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>