TailwindreadyTailwindready

Navigation Components

Headers, navbars, sidebars, and navigation menus with responsive designs for all screen sizes.

3 COMPONENT VARIATIONS
Components

Centered Navigation

A centered navigation layout with logo in the middle and balanced navigation links on both sides.

View

Sidebar Navigation

A collapsible sidebar navigation perfect for dashboards and admin panels with organized menu sections.

View

Simple Header with Logo

A clean header with logo on the left and navigation links on the right, perfect for most websites.

View

Centered Navigation

A centered navigation layout with logo in the middle and balanced navigation links on both sides.

Brand
Home About Services Portfolio Blog Contact

Component Code

<header class="bg-white">
  <div class="max-w-screen-2xl mx-auto px-6 sm:px-9 lg:px-12">
    <div class="flex items-center justify-between py-6">
      <!-- Left Navigation -->
      <nav class="hidden lg:flex items-center space-x-9">
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">Home</a>
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">About</a>
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">Services</a>
      </nav>

      <!-- Center Logo -->
      <div class="flex items-center">
        <a href="#" class="flex items-center space-x-3">
          <div class="w-12 h-12 bg-cyan-700 rounded-xl flex items-center justify-center">
            <svg class="w-9 h-9 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
            </svg>
          </div>
          <span class="text-2xl font-bold text-gray-900">Brand</span>
        </a>
      </div>

      <!-- Right Navigation -->
      <nav class="hidden lg:flex items-center space-x-9">
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">Portfolio</a>
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">Blog</a>
        <a href="#" class="bg-cyan-700 text-white px-6 py-3 rounded-lg text-sm font-medium hover:bg-cyan-800 transition-colors">Contact</a>
      </nav>

      <!-- Mobile menu button -->
      <div class="lg:hidden">
        <button type="button" class="text-gray-600 hover:text-cyan-700 p-3">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Navigation Menu -->
  <div class="lg:hidden border-t border-gray-200">
    <div class="px-6 py-3 space-y-3">
      <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">Home</a>
      <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">About</a>
      <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">Services</a>
      <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">Portfolio</a>
      <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">Blog</a>
      <a href="#" class="block bg-cyan-700 text-white px-6 py-3 rounded-lg text-base font-medium hover:bg-cyan-800 transition-colors mt-3">Contact</a>
    </div>
  </div>
</header>

Simple Header with Logo

A clean header with logo on the left and navigation links on the right, perfect for most websites.

TailwindReady
Home Products Solutions Pricing Contact
Sign in Get Started

Component Code

<header class="bg-white">
  <div class="max-w-screen-2xl mx-auto px-6 sm:px-9 lg:px-12">
    <div class="flex justify-between items-center py-6">
      <!-- Logo -->
      <div class="flex items-center">
        <a href="#" class="flex items-center space-x-3">
          <div class="w-9 h-9 bg-cyan-700 rounded-lg flex items-center justify-center">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
          </div>
          <span class="text-xl font-bold text-gray-900">TailwindReady</span>
        </a>
      </div>

      <!-- Desktop Navigation -->
      <nav class="hidden md:flex items-center space-x-9">
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">Home</a>
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">Products</a>
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">Solutions</a>
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">Pricing</a>
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">Contact</a>
      </nav>

      <!-- CTA Button -->
      <div class="hidden md:flex items-center space-x-3">
        <a href="#" class="text-gray-600 hover:text-cyan-700 px-3 py-3 text-sm font-medium transition-colors">Sign in</a>
        <a href="#" class="bg-cyan-700 text-white px-6 py-3 rounded-lg text-sm font-medium hover:bg-cyan-800 transition-colors">Get Started</a>
      </div>

      <!-- Mobile menu button -->
      <div class="md:hidden">
        <button type="button" class="text-gray-600 hover:text-cyan-700 p-3">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Navigation Menu -->
  <div class="md:hidden border-t border-gray-200">
    <div class="px-6 py-3 space-y-3">
      <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">Home</a>
      <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">Products</a>
      <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">Solutions</a>
      <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">Pricing</a>
      <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">Contact</a>
      <div class="pt-3 border-t border-gray-200">
        <a href="#" class="block text-gray-600 hover:text-cyan-700 px-3 py-3 text-base font-medium">Sign in</a>
        <a href="#" class="block bg-cyan-700 text-white px-6 py-3 rounded-lg text-base font-medium hover:bg-cyan-800 transition-colors mt-3">Get Started</a>
      </div>
    </div>
  </div>
</header>

Ready to Use These Components?

Copy the code and customize it to match your brand. These components are built with TailwindCSS and work seamlessly in any project.

Explore More Components