Navigation Component
A responsive navigation component designed with Microinteractions and featuring engaging animations based on user actions, supporting both light and dark themes. The component includes profile avatar, navigation links, and hover effects.
HTML Code
<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>
Related Components
Brutalist_Dating_Navigation_Simple
A simple, brutalist-inspired navigation bar for a dating/social app, featuring high-contrast elements, warm neutrals, and full responsiveness with dark mode support.
Skeuomorphic Navigation Component
A navigation component designed with skeuomorphic style, featuring a complementary color scheme, suitable for a dashboard with data visualization and control panels. It includes interactive elements for user engagement.
Social Media Navigation
A clean, minimalist social media navigation component with a forest green palette, designed for responsive layouts and dark mode. Features a main navigation, user profile, and search.