TailwindreadyTailwindready
Icons

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

Need Icons for Your Project?

Discover our collection of hand-picked SVG icons designed for modern applications. Copy as HTML or JSX and use them instantly in your projects.

Browse Icons