React Navbar Dropdown Menu Responsive Tutorial - Beginner React JS Project

Learn how to make a React Navbar Dropdown Menu in this tutorial. I used React Hooks and React Router to create this navbar. When you click on any menu item it will navigate to that link and update the page

It is mobile responsive and has a hamburger menu that showcases the navbar whenever you click on it. Feel free to refactor the code and add any changes

If you want to follow me along my coding journey, be sure to subscribe :)

Source code

Codeacademy Pro Review

[briandesign]

Check out my new React Website that is fully responsive Tutorial

[hungryphood]

Could you please correct the source code to make the "Services' responsive mobile menu become multiple levels, thanks.

[MaHaJaan-RoMak]

Being a beginner react developer your videos are just like a diamond...thank you very much brian. and lots of respect...

[tonkihonks]

you did a _setDropdown(false)_ when the window is less than 960 width. Why is that? How can we leverage the menu items in Mobile, this tutorial is incomplete if a page loses content arbitrarily just cause the user is on a mobile device

[RonaldJayBuayan]

dropdown isn't working on mobile?

[tonkihonks]

Thanks for the tutorial - On mobile view, your nested navigation links to *Services* disappear. How can we have that nested navigation functionality just like you do on desktop view?

[revathig]

hover property is not working on my mobile devices. what should i do? pls anyone reply and thanks.

[navaneethpenumarthi]

What the hell man, You just ignored the dropdown for the mobile, Which was the reason I was watching the tutorial

[Anuj_Kumar_]

In mobile view how the service sub menu display?

[sdsd-ecrw]

what the f...! how to open consulting from mobile menu?

[ivanmilivojevic]

And where is the dropdown menu on mobile once you click on Services ? The most important part is not here in the video. Simply pointless when there is no mobile dropdown, I would like to see how you would implement that and prevent Link default behavior of routing to component

[naufalnoori]

do u have solution for navbar dropdown in mobile window size? seems like it was not shown in this window

[akhila]

the icon change isn't working that way! I had to use svg files instead!

[mohamedessam]

If you do it with animation well be perfect

[hammerhammond]

Great video, but something with your Dropdown component isn't right. I was having issues after following your video to the end, so I just copied your code straight from GitHub and am still having the same issue. My Dropdown component won't show for some reason. Does anyone have a clue why? I've been at this for HOURS. Please send help lol. I cant be the only one

[blessingmutero]

@Brian Design, I’m trying to make the nested drop down work on my mobile, I’ve managed to do that but I can’t exit the drop down after that. I have to manually press the “fa-times” icon to view the page. How can I make this work automatically? Any help bruv

[Amitverma-mbtu]

Loved yout tutorials. Easy to understand. Untill your multi-level drop down video comes, will try it by myself. Hints are welcome. :-)

[bigshotjeev]

Hi Brian, Can you please make a tutorial on reusable dropdown menu. I have like 5 dropdown menus in navbar. How to make MenuItems component reusable?

[daeralbra]

Good video! The only thing I would suggest is to go straight to the point. I mean the design or the font you use is not really as relevant as the actual functionaly of the dropdown menu.

[cbinfever]

Great tutorial thanks so much! Quick tip: Cmd + W will close your current tab inside most applications (including VS Code)