Building a Navbar

Create a responsive navigation bar with flexbox.

Syntaxclass="flex justify-between items-center"

A navbar is a flex row with the brand on the left and links on the right, using justify-between and items-center. Links can hide on small screens.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer builds a responsive navigation bar that shows a full link list on desktop and a hamburger menu button on mobile using Tailwind flex and hidden utilities.
A SaaS app's header places the logo on the left, navigation in the center, and a CTA button on the right using justify-between and flex.
A documentation site's sticky nav highlights the active page link with a different text color and underline using a current-page class.

More examples

Simple flex navbar

justify-between separates logo, nav links, and CTA; hidden md:flex hides the link list on mobile — the foundation of a responsive navbar.

<header class="bg-white border-b px-6 py-4">
  <nav class="flex items-center justify-between max-w-5xl mx-auto">
    <a href="/" class="text-xl font-bold text-indigo-600">Brand</a>
    <ul class="hidden md:flex gap-6 text-sm text-gray-600">
      <li><a href="/features" class="hover:text-gray-900">Features</a></li>
      <li><a href="/pricing" class="hover:text-gray-900">Pricing</a></li>
      <li><a href="/docs" class="hover:text-gray-900">Docs</a></li>
    </ul>
    <button class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700">
      Sign Up
    </button>
  </nav>
</header>

Sticky navbar with shadow

sticky top-0 z-50 pins the header during scroll; bg-white/90 backdrop-blur creates a frosted-glass effect as content scrolls beneath it.

<header class="sticky top-0 z-50 bg-white/90 backdrop-blur border-b">
  <div class="container mx-auto flex items-center justify-between px-4 py-3">
    <span class="font-bold text-lg">Acme</span>
    <nav class="flex gap-4 text-sm text-gray-600">
      <a href="#features">Features</a>
      <a href="#pricing">Pricing</a>
    </nav>
  </div>
</header>

Active link indicator

The active link gets text-indigo-600, font-semibold, and border-b-2 to visually distinguish the current page from inactive links.

<nav class="flex gap-6 text-sm">
  <a href="/" class="text-indigo-600 font-semibold border-b-2 border-indigo-600 pb-0.5">
    Home
  </a>
  <a href="/about" class="text-gray-500 hover:text-gray-900">About</a>
  <a href="/blog" class="text-gray-500 hover:text-gray-900">Blog</a>
</nav>

Discussion

Be the first to comment on this lesson.