How to Build a Responsive Navbar with Tailwind CSS

The Desktop Layout

Start with a flex container holding your logo on the left and nav links on the right. Use justify-between and items-center to align them. Hide the hamburger menu on large screens with hidden lg:block.

The Mobile Menu

Add a hamburger button that is visible only on small screens. Create a mobile menu div that is hidden by default. Toggle a hidden class on click using a small JavaScript snippet or Alpine.js for a zero-dependency solution.

Smooth Transitions

Add transition-all duration-300 and max-h-0 / max-h-96 classes to animate the menu opening. This approach animates the height without JavaScript-calculated heights, keeping the code simple.

Sticky Behaviour on Scroll

Make the navbar sticky with sticky top-0 z-50. Add a JavaScript scroll listener that toggles a shadow class (shadow-md bg-black/90 backdrop-blur) to give the navbar a frosted glass effect when the user scrolls past the hero section.