Recipe

Responsive Navbar

A sticky nav with logo, links, CTA button, and a hamburger menu for mobile.

Live Preview

↑ Try clicking the hamburger icon on smaller widths.

The Code

Navbar Component

<nav className="flex items-center justify-between
  bg-white px-6 py-4 dark:bg-neutral-900">

  {/* Logo */}
  <span className="text-lg font-bold text-indigo-600">
    Acme
  </span>

  {/* Desktop Links (hidden on mobile) */}
  <div className="hidden md:flex items-center gap-6
    text-sm font-medium text-neutral-600">
    <a href="#" className="hover:text-indigo-600">Products</a>
    <a href="#" className="hover:text-indigo-600">Pricing</a>
    <button className="rounded-lg bg-indigo-500 px-4 py-2
      text-white font-semibold hover:bg-indigo-600">
      Sign Up
    </button>
  </div>

  {/* Mobile Hamburger (hidden on desktop) */}
  <button className="md:hidden">
    <MenuIcon />
  </button>
</nav>

What You Learned

• hidden md:flex — hide on mobile, show on tablet+
• md:hidden — show hamburger only on mobile
• justify-between — push logo and links to edges
• items-center — vertically center everything