The easiest way to create a responsive navbar menu in React JS using TailwindCSS

It took me an hour of googling and finding articles, just to create a responsive navigation bar in react JS. I thought why a simple function like this is complicated in react. I was using Next JS & React JS for the first time ever. So I searched for a simple solution.

Every blogs or articles explained the complex way of adding navigation bar. Using some extra plugins or complex setup.

Earlier I did a project with Alpine JS and it was super easy to create a similar responsive menu with hamburger icon. I referred the code once again and found that Alpine JS doing all this magic with one "data". I knew about React Hooks which is similar to the data state in Alpine JS. I ported the data with hooks and viola.. it works without much fuss.

Here's how I did it.

Create a React Hook

First, create a react hook inside your navigation component.

 const [isOpen, setisOpen] = React.useState(false);

Now create an SVG hamburger Menu button that is visible only on mobile (using TailwindCSS Classes)

Then make sure the Menu & Close icon path visible based on the State isOpen.

<button type="button" className="block lg:hidden">
    <svg className="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        {isOpen && (
        <path fillRule="evenodd" clipRule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
        )}
        {!isOpen && (
        <path fillRule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
        )}
    </svg>
</button>

Click Handler

Now create an onClick handler to handle the click toggle to show / hide menu on mobile.

const Navbar = () => {
  const [isOpen, setisOpen] = React.useState(false);

  function handleClick() {
    setisOpen(!isOpen);
  }

  return (
<button  type="button" className="block lg:hidden" onClick={handleClick}>
...
...

Final Part

And the final part. Make sure to show / hide our main menu based on the state using TailwindCSS Classes.

<ul className={`lg:flex ${  isOpen ? "block" : "hidden" } `}>
...
</ul>

That's it. We now have a working Responsive Navbar using React Hooks.

One thing to note here is the hidden class is always added to the <ul> regardless of browser size. But adding our magic lg:flex class overwrites the hidden class in large sreens. So no extra configiration is needed.

Pretty neat!

Live Demo

I can add a live demo on Codepen if you wish, just let me know in the comments.

Conclusion

I found this solution is easier to do a responsive navigation menu in react. If you are not using tailwind, you can still do the same using pure css or scoped css. If you have a better & easy version than this, please let me know in the comments as I'm a beginner in this react world.

The easiest way to create a responsive navbar menu in React JS using TailwindCSS

Comments

More from this blog

Component-based Web Development for Beginners

How to create cross-compatible website shortcut for Mac & Windows

Problems I faced in a Mac as a Windows user (and how to solve them)

Ultimate Email Forwarding Guide + Send Reply

Sync GitHub Fork with Original Repo (not using command or bash)

Create a React Hook

Menu Icon

Click Handler

Final Part

Live Demo

Conclusion

Command Palette

Comments

More from this blog

Create a React Hook

Menu Icon

Click Handler

Final Part

Live Demo

Conclusion