Navigation Components
A dark mode navigation bar with responsive design, featuring a logo, avatar, and links for navigation.
HTML Code
<nav class="bg-gray-900 text-white p-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="w-10 h-10 rounded-full">
<span class="text-xl font-semibold">My Website</span>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:text-gray-400 transition duration-200">Home</a>
<a href="#" class="hover:text-gray-400 transition duration-200">About</a>
<a href="#" class="hover:text-gray-400 transition duration-200">Services</a>
<a href="#" class="hover:text-gray-400 transition duration-200">Contact</a>
</div>
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer">
<div class="absolute right-0 mt-2 w-48 bg-gray-800 text-white rounded-md shadow-lg hidden group-hover:block">
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Profile</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Logout</a>
</div>
</div>
</nav>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
}
}
</style>
Related Components
Brutalist Social Navigation
A simple, brutalist navigation component for social media with complementary colors. Includes responsive design and dark mode support.
Minimalist Earth Tones Navigation Component
A minimalist, flat design navigation component with an earth-tone color scheme, suitable for consulting/services websites. It includes responsive design for desktop, tablet, and mobile, and supports dark mode.
Navigation Components Component
A retro-vintage navigation component for a dashboard, featuring a complex layout with complementary colors, responsive design, and dark theme support using Tailwind CSS. It includes a logo, navigation links, a search bar, and user profile information.