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.

► Timestamps
0:00 Introduction
1:27 Creating & Configuring the Project
5:05 Create the Main Navigation
9:14 Make The Navigation Menu Responsive

[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.

[AntonisPapadopoulos]

I have recently started with react and tailwindcss and found your tutorial very helpful, thank you!

I turned the <FiMenu> 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 <button> element and within that, I simply check the state of the navbar to display the icon accordingly:

<button onClick={() => setOpen(!navbarOpen)} id="navbarToggler" aria-label="Navigation" className="block md:hidden">
{navbarOpen ? <FiX size={32} /> : <FiMenu size={32} />}
</button>

I will for sure watch all your other videos and subscribe

[badillo]

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

[sjtrader]

Great. Already waiting for next video.

[arunrathore]

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

[sjtrader]

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