Simple Responsive Navigation Menu with Tailwind CSS in ReactJS

In this tutorial, you'll learn how you create a simple responsive navigation menu with tailwind CSS in react js. Here I have used Tailwind CSS with NextJS which is a react js framework. This tutorial will also be helpful for you if you're a complete beginner in any of these Tailwind CSS, ReactJS, or NextJS.
⦿ eCommerce Website Design with Tailwind CSS Tutorial • Design Responsive eCom...
⦿ Login Page in Next JS with Tailwind CSS Tutorial • Create Login Page in N...
⦿ Sidebar Navigation Menu with Tailwind Tailwind CSS Tutorial • Sidebar Navigation Men...
→ Social App with Firebase in React Native Playlist • Social App with Fireba...
→ React navigation v5 tutorial playlist • React Navigation 5 Tut...
→ Food Finder App in React Native Playlist • Food Finder App in Rea...
→ Music App UI Tutorial • Music App UI in React ...
► Timestamps
0:00 Introduction
1:27 Creating & Configuring the Project
5:05 Create the Main Navigation
9:14 Make The Navigation Menu Responsive
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/itzpradip
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/

[@skverskk]

Definitely one of the best NAV tutorials using Next and Tailwind. I modified to use the Next Image tag as well as the Link tags.

[@itzpradip]

Awesome, thank you!

[@AntonisPapadopoulos]

I have recently started with react and tailwindcss and found your tutorial very helpful, thank you!
I turned the into a toggle though, changing icon upon state. For the open stated I chose "FiX" icon and for closed state "FiMenu".
import { FiMenu, FiX } from "react-icons/fi";
To accomplish the toggle, I put the same code you provided inside a element and within that, I simply check the state of the navbar to display the icon accordingly:
setOpen(!navbarOpen)} id="navbarToggler" aria-label="Navigation" className="block md:hidden">
{navbarOpen ? : }
I will for sure watch all your other videos and subscribe

[@eleanacano]

Thank you!

[@jesseemana9598]

you're a life saver

[@julioxavier6898]

Thank you for help me.

[@sjtrader1363]

Great. Already waiting for next video.

[@itzpradip]

Thanks for your comment & support.

[@badillo2773]

Hello
excellent tutorial
The question is that I am using React Remix but when I press the button nothing happens, the menu is not displayed.
Thank you

[@cbkapil]

excellent

[@itzpradip]

Thanks!

[@cbkapil]

@@itzpradip can I get your mail or any contact in case if i am stuck in any program I will ping you.

[@sjtrader1363]

Please teach how to create a dependent dropdown menu like country->state->city in react and react-native

[@itzpradip]

Thanks for the suggestions. I'll create a tutorial on this soon.

[@arunrathore1732]

Hey pradip I have been following your videos and its informative and good. Please can you implement Facebook auth login, facebook updated its configuration and stuff, i watched your fb auth login but that didnt work out, Please make simple if u dont have much time, just fb implementation and with single button, no need to make hole app, no latest video available for it

[@itzpradip]

Ok, I'll try to make a video for it. Thanks for the comment.

[@arunrathore1732]

@@itzpradip OK