Tailwind CSS Academy · Lesson

Building a Responsive Navbar

Create a horizontal navbar with logo, links, and CTA that collapses into a hamburger menu on mobile using hidden and flex responsive utilities.

Anatomy of a Navbar

A navigation bar (navbar) sits at the top of a page and typically contains a logo on the left, navigation links in the center or right, and a call-to-action button at the far right. On mobile, the links collapse into a hamburger menu to save space.

The navbar shell uses flex items-center justify-between to distribute these three zones horizontally, with px-6 py-4 for comfortable padding.

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
  <!-- Logo -->
  <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
  <!-- Nav links (hidden on mobile) -->
  <div class="hidden md:flex items-center gap-6">...</div>
  <!-- CTA -->
  <button class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-lg">Sign Up</button>
</nav>

Logo and Brand Area

The logo area is typically an anchor tag wrapping either an SVG logo or a text-based brand name. Use flex items-center gap-2 if combining an icon and text, so they align vertically.

Keep the logo font bold and use your brand's primary color: font-bold text-xl text-blue-600. Make the anchor keyboard-focusable with a focus:outline-none focus-visible:ring-2 focus style.

<a href="/" class="flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
  <svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
  </svg>
  <span class="text-xl font-bold text-gray-900">Launchpad</span>
</a>

All lessons in this course

← Back to Tailwind CSS Academy