Surjith's Blog

Surjith's Blog

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

Subscribe to my newsletter and never miss my upcoming articles

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.

 
Share this