Components

Navbar

A navbar is a flex row with the brand on one side and links on the other. Use responsive utilities to hide links on mobile.

A simple responsive navbar

flex + justify-between spreads the brand and links apart. hidden md:flex shows the links only from medium screens up.

Brand, links and a CTA — resize the preview

Example

<nav class="flex items-center justify-between bg-white px-5 py-3 rounded-xl shadow">
  <span class="font-black text-lg text-sky-600">MyInternships</span>
  <div class="hidden md:flex items-center gap-6 text-gray-600 font-medium">
    <a href="#" class="hover:text-sky-600">Internships</a>
    <a href="#" class="hover:text-sky-600">Jobs</a>
    <a href="#" class="hover:text-sky-600">Learn</a>
  </div>
  <button class="bg-sky-600 text-white font-semibold px-4 py-2 rounded-lg">Sign in</button>
</nav>

ℹ️

On mobile you would show a hamburger button (with a bit of JavaScript) to toggle a menu — the layout utilities stay the same.

Navbar

A simple responsive navbar

Related Tailwind Topics