Responsive Navbar in React using React Router | Beginner Tutorial

Learn how to make a responsive navbar in React using React Router. The navbar shows the active page, highlights links on hover, and sticks to the top of the page on scrolling. This project is a great introduction to the basics of routing in react using React Router.

-- 🌟 Useful Tools and Software 🌟 --

-- 🔗 Links 🔗 --

DISCLAIMER: Some of the links in the description are affiliate links. The channel will receive a small commission from any sales from these links, but there is no extra charge to you. Thanks for supporting the channel so I can keep making these free tutorials!

[fletcherrat]

Exactly what I needed right when I needed it. Ty for the vid and the repo!! Really helpful to a beginner

[chrisdavis]

I loved how you broke down the 'why' as you were going along! that was SUPER helpful from a backend guy that struggles with the 'WHY' of CSS!! Thank you

[fesjydc]

I’m 3 mins in and I’m already sure this would be prefect for me. Love your style of explanation. Precise, straight to the point and your pronunciation is clearest I’ve heard from an Indian YouTuber🤌🤍

[Nop.]

I really appreciate this man. There a billion ways to make a navbar and very few of them are friendly to the beginner. thanks for the introduction!

[lrachelparaiso]

Clear, precise & very helpful! 👍👍👍Thank you…pls keep making these tutorials! ✅✅✅

[noohkot]

Thanks for the super helpful video! I really love your explanation along the way! Keep up the good work!

[faizaislam]

very helpful and easy to understnad especially for beginner, thank you

[senalchandrasekara]

Great vid! A tad bit of feedback if I may, the menu doesn't close when clicked elsewhere (Need to click specifically on the hamburger lines). A simple solution might the use of useEffect hook to listen for a mouse click and gauge whether it is within the borders of the menu or not, and then the useRef hook to refer to the relevant div in the rendered HTML and ensure the open/close state of the menu is toggled accordingly. current.contains(e.target) returns a boolean indicating whether the click was within the borders of the menu or not.

[Gaamaa-ozeflfn]

Simple and excellent explanation !
4 star

[Shaburu]

around the 22:52 mark how do you get the background to take the entire 100% width? the same CSS doesnt work for me haha

[ParasProgramming]

in my case this active link color also appears for website what should i do

[adeebrahman]

How can we animate the drop-down list when the bars are clicked

Plz help

[Threenineswonracks]

I probably missed something, but how are you rendering this to the page without “export default App;”

[DailyMadnesz]

Hey man, I've been looking for someone that can tell me what the cpm for react tutorials channels is. could you please tell me what the current cpm is?

[jasim]

pls explain difference between BrowserRouter vs createBrowserRouter.. and make a tutorial for it..