Components Navigation Bar Blog Navigation Bar

Blog Navigation Bar

Responsive Navigation Bar with Dark Mode support for Blog/Content websites. Features a minimalist/flat design with a pastel color scheme.

Preview

HTML Code

<nav class="bg-pink-100 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white">My Blog</a>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Blog</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a>
    </div>
  </div>
</nav>

Related Components

Artsy_Neon_Crypto_Navbar

A complex, responsive navigation bar for cryptocurrency/blockchain applications with an artistic, watercolor-inspired design and a bright, neon color scheme. Includes dark mode support and interactive elements.

Open

Navigation Bar Component

A responsive navigation bar for a dashboard, featuring a dark mode theme with earth tones. Includes a logo, navigation links, a search bar, and user profile section. Designed for moderate complexity with interactive elements.

Open

Cyberpunk_Finance_Navbar

A simple, responsive cyberpunk-themed navigation bar for finance/banking applications, featuring a dark background, bright gradient accents, and dark mode support.

Open