Search Components

Navigation Bar

Typically located at the top of the page, containing main links

Glassmorphism Dashboard Navigation Bar

Glassmorphism Monochromatic Complex Dashboard Navigation Bar with Tailwind CSS, responsive and dark theme support.

                <nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white font-bold text-xl">Dashboard</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Settings</a>
      <a href="#" class="text-white hover:text-gray-200">Reports</a>
      <a href="#" class="text-white hover:text-gray-200">Users</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Portfolio Navigation Bar

A responsive navigation bar with dark theme support, designed for a portfolio website using Material Design principles and earth tones color scheme. It includes a brand logo, navigation links, and a call-to-action button. The design is moderately complex and adapts to different screen sizes.

Open Preview

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <div>
          
          <a href="#" class="flex items-center py-4 px-2">
            <span class="text-gray-800 dark:text-white text-lg font-bold">Portfolio</span>
          </a>
        </div>
        
        <div class="hidden md:flex items-center space-x-1">
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Home</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Projects</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">About</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Contact</a>
        </div>
      </div>
      
      <div class="hidden md:flex items-center space-x-3 ">
        <a href="#" class="py-2 px-2 font-medium text-gray-500 dark:text-gray-300 rounded hover:bg-green-500 dark:hover:bg-green-400 hover:text-white dark:hover:text-white transition duration-300">Log In</a>
        <a href="" class="py-2 px-2 font-medium text-white bg-green-500 dark:bg-green-400 rounded hover:bg-green-400 dark:hover:bg-green-500 transition duration-300">Sign Up</a>
      </div>
      
      <div class="-mr-2 flex md:hidden">
        <button class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 dark:hover:bg-gray-700 dark:focus:bg-gray-700">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  
  <div class="mobile-menu hidden md:hidden">
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
  </div>
</nav>

Brutalist Navigation Bar

A responsive navigation bar designed in a brutalist style with high-saturation colors, for blog and content consumption, featuring dark theme support.

Open Preview

                <nav class="bg-green-600 dark:bg-green-900 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Home</a>
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">About</a>
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Blog</a>
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Contact</a>
        </div>
        <div class="hidden md:flex items-center space-x-4">
            <a href="#" class="text-white bg-yellow-400 dark:bg-yellow-600 px-4 py-2 rounded-lg hover:bg-yellow-300 dark:hover:bg-yellow-500">Sign In</a>
            <a href="#" class="text-white bg-red-500 dark:bg-red-700 px-4 py-2 rounded-lg hover:bg-red-400 dark:hover:bg-red-600">Get Started</a>
        </div>
    </div>
    <div class="md:hidden mt-2">
        <button class="text-white rounded-md p-2 hover:bg-yellow-300 dark:hover:bg-yellow-500">
            Menu
        </button>
    </div>
</nav>
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-4">
    <h1 class="text-3xl font-bold">Welcome to My Blog</h1>
    <p class="mt-2">Discover amazing articles and content that inspire and educate.</p>
    <img class="mt-4 rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
    <div class="flex mt-4 space-x-4">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture">
    </div>
</div>

Skeuomorphic Social Media Nav Bar

Skeuomorphic social media navigation bar with triadic color scheme and moderate complexity.

Open Preview

                <nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-lg dark:shadow-[0_20px_50px_rgba(0,_0,_0,_0.6)] p-4 rounded-b-xl">
  <div class="container mx-auto flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2.343 2.343a1 1 0 01-1.414 0L11.5 11.5m-4 4L7 10m3.75 3.75V17m-5 0h5"></path></svg>
        <span class="font-bold text-xl">SocialApp</span>
      </a>
    </div>
    <div class="flex items-center space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300 relative">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 01-6 0v-1m6 0H9"></path></svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-7.504-4.588M3.05 5.84C3.05 5.84 6.893 19 12 19s8.95-13.16 8.95-13.16"></path></svg>
      </a>
      <div class="relative">
        <button class="relative z-10 block h-10 w-10 rounded-full overflow-hidden border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-white">
          <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Your avatar">
        </button>
      </div>
    </div>
  </div>
</nav>

Skeuomorphic Navigation Bar

A simple responsive navigation bar for social media with a skeuomorphic design style, utilizing an analogous color scheme and supporting dark mode.

Open Preview

                <nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
        </div>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
        </ul>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
        </div>
    </div>
</nav>

Social Media Navigation Bar

Glassmorphism Grayscale Simple Social Media Navigation Bar Component

Open Preview

                <nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-800 dark:text-white text-xl font-bold">SocialApp</div>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Feed</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Profile</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Messages</a>
    </div>
  </div>
</nav>

Dark Mode Navigation Bar

Navigation Bar Component with responsive effects and dark theme support.

Open Preview

                <nav class="bg-gray-800 p-4 text-white">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-lg font-semibold">My Website</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Services</a>
      <a href="#" class="hover:underline">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Navigation Bar Component

A responsive navigation bar with Microinteractions, and dark mode support using Tailwind CSS.

Open Preview

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">
        <a href="#" class="hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out">My Website</a>
      </div>
      <div class="hidden md:block">
        <div class="flex items-center space-x-4">
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Home</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">About</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Services</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Contact</a>
        </div>
      </div>
      <div class="md:hidden">
        <button class="text-gray-700 dark:text-white focus:outline-none">
          <svg viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
            <path fill-rule="evenodd" d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Minimalist Navigation Bar

A responsive navigation bar component designed in a minimalist style, supporting dark theme and utilizing Tailwind CSS.

Open Preview

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <img class="h-8" src="https://picsum.photos/40/40" alt="Logo">
        </div>
        <div class="hidden md:flex md:space-x-8">
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Home</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">About</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Services</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
        </div>
      </div>
      <div class="flex items-center">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</nav>

<!-- Mobile menu button -->
<div class="md:hidden">
  <button class="flex items-center p-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" aria-label="Toggle Navigation">
    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
    </svg>
  </button>
</div>

<!-- Mobile Menu -->
<div class="md:hidden">
  <div class="bg-white dark:bg-gray-800 shadow-md px-4 py-2 space-y-2">
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Home</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">About</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Services</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
  </div>
</div>

NavigationBar

Responsive Navigation Bar Component in Dark Mode using Tailwind CSS

Open Preview

                <nav class="bg-gray-800 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="text-lg font-bold">Brand</div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-400">Home</a>
            <a href="#" class="hover:text-gray-400">About</a>
            <a href="#" class="hover:text-gray-400">Services</a>
            <a href="#" class="hover:text-gray-400">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-white focus:outline-none" id="menu-btn">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="md:hidden" id="menu" style="display: none;">
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Home</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">About</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Services</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Contact</a>
    </div>
</nav>

<!-- User Avatar Section -->
<div class="p-4 bg-gray-900">
    <div class="container mx-auto flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <span class="ml-2">User Name</span>
    </div>
</div>

<!-- Placeholder Image Section -->
<div class="p-4">
    <img src="https://picsum.photos/1920/1080" alt="Placeholder Image" class="w-full h-auto">
</div>

Search Components

Categories

Navigation Bar