ReactJS - Build a Responsive Navigation Bar & Side Drawer Tutorial

Build a responsive navigation bar with ReactJS and add a React-driven Side Drawer. Learn how to combine functional and class-based React components!
----------
Learn React in our comprehensive 30h+ course: acad.link/reactjs
Dive deeper into CSS in our "Complete Guide" course: acad.link/css
What is Flexbox: academind.com/learn/css/under...
Our Code Editor: academind.com/learn/web-dev/v...
Demo Source Code: www.academind.com/learn/react...
Want to learn something totally different? Check out all other courses: academind.com/learn/our-courses
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

[@v-for-vieira]

This was the best React tutorial i've seen.
I learned so much about so many aspects of react, that I am truly greatfull for this!

[@paoloruggirello8695]

Omg FINALLY a tutorial that actually makes sense and works! I've been trying other tutorials for days to no avail. Great work and thank you!

[@SuperKasidit]

I love you man. This is an eye-opener for me. I was struggling with styling with React for a while.

[@sahajamatya]

Thank you Max! Always learn so much from you. Have been building a lot of applications from your React course. I highly recommend everyone to use it if you are a beginner and want to learn React.

[@mandoamador]

Thank you for this video. I had implemented my own before watching this and I'm going to go back and edit it to be more modular. Looking forward to watching your other videos!

[@udyatbhanubaliyarsingh1090]

By far one of the best react tutorials I have seen so far, this is just so creative and shows your extreme skills, I will be using this in my project, I'm also your udemy react student!

[@academind]

Thanks a million for this absolutely fantastic feedback, highly appreciated :)

[@winsamroderos4551]

I appreciate the modern syntax and explanation. Can't wait to watch your other react vids!

[@sharvarisuryawanshi3368]

First when I started with React I thought I would use bootstrap in making all the components but then due to some errors I wasn't able to use it. After finding so many things, I found this video and I could make a nav bar easily. Thanks for this video.

[@SonGoku-lc1sb]

Jesus christ !! You are the best man. I have taken multiple courses from you. Your courses have NEVER disappointed me! Beautiful. Thanks to you i am a successful React Dev today.

[@ahmedmersal1168]

thank you , you made my day literally

[@muzik3282]

Great Tutorial, instead of using external library I watch this tutorial and built it by myself. Thanks man.

[@arglas3004]

What an incredible video. It was just for me to learn how to build a side drawer! End up learning so many cool concepts of reactjs. Thanks so much bro!

[@benchen2697]

You have explaimned everything in this video soooo well. I love ur videos!

[@omrprt]

Thanks Max. I really enjoy your teaching style how you communicate concepts. thank you.

[@junka3]

Max! welcome back. Love the great content from Academind

[@academind]

Happy to read that you like our content Sergio, but no worries, I was never gone ;)

[@adognamedcarlo]

Great video, Thank you so much for your help. One of the best React tutorials I've seen as well.

[@iffattasnim4440]

Thank you SO much For the tutorial. It encouraged me a lot to study react.js styling more.

[@dimaster5880]

OMG, That is what I have looked for a long time. My respect.

[@academind]

Thanks so much for your awesome feedback, happy to read that the video was helpful for you!

[@SarKurd]

Another great video as usual, thanks

[@academind]

Thank you so much!

[@serhatbelen7]

It was the most precious 50 minutes of my life. Thank you

[@academind]

Glad you enjoyed it!

[@aiarmy5930]

amazing tutorial!! thank you very much 🙏
your stamina is very high though i had to read the video at lower speed to be able to follow the steps (i'm a nooby in react 😅)🧡

[@growemup]

This is such an easy to follow video! Great explanations on everything and easy to replicate! Thanks for this video honestly

[@kostyachernysh5030]

Awesome tutorial
Thank you, Max!

[@amithbhagat]

Thanks a lot. Comprehensive tutorial. Understood several concepts in HTML, CSS & React.

[@patrickpetit7501]

Bravo ! Superbe formation sur la réalisation pas à pas de menu dynamique et responsive en Ractjs. On comprend très bien sans connaître vraiment l'anglais. Merci :-)

[@riazripon6670]

I am from Bangladesh.
Love to this course. That's just an awesome tutorial.
thank you sir

[@luis_soul1]

This was very very helpful to me, thank you so much! You're amazing.

[@satya-lifevlogs]

Thanks Max! Please keep making more videos on responsive webpages.

[@pratikkrishna324]

Love you bro

[@JKhalaf]

This was brilliant Max, keep up the good work. I've subscribed for more good content like this.

[@academind]

Thanks so much for your support, I'll do my best to keep it up!

[@KhayyamJones]

Thank you for another great video! I really appreciate your explanations of the different components as you use them. In this video I really like the explanation of the CSS styles, how the styles work together (or not).

[@academind]

Thanks so much for your awesome feedback Khayyam, it really means a lot to me that my explanations are helpful!

[@snoopyfrogs]

I'm learning JS + React atm, my friend told me that your Udemy course is best way to learn mostly everything about React. Signed in!

[@academind]

Thanks a lot to you and your friend for your awesome support, I really hope that you will like the course!

[@georgeliss4015]

Great video! thanks! It would be awesome to see follow-up to it... maybe include react-router?

[@chahalpawanpreet]

These techniques are so clever. I had a nice 'a ha' moment watching this. Just what I needed to continue working on my project sir thank you

[@isabelle7756]

thank you so much! Learned so much and I'm so thankful!

[@webdevshow]

Max is like lifeline for me, every time I get stuck with something in web development his video lectures save me.

[@academind]

That's so cool to read Mohd, thanks a lot for your awesome comment!

[@sahiltrivedi69]

Thank you for your video you really helped out a developer going thru a tough time god bless stay awesome

[@walljacket]

Great video, for me it helped reinforce concepts I was exposed to in other your videos and courses.

[@academind]

Happy to read that the video was helpful for you David, thanks a lot for sharing this great feedback!

[@tonytino139]

This is an excellent tutorial, thank you so much for putting this superb quality content together! Got yourself another subscriber today

[@academind]

Awesome to have you on board of the channel Anthony, thank you for your support and for your great feedback!

[@ddg1972]

Wow, thank you very very much! I learned a lot with this video.

[@anirudhsinghshekhawat5581]

Great video Max! Just like always

[@bennychewDev]

Nice tutorial, I learned a few new React tricks here. Thanks Max!

[@academind]

Thank you Benny!

[@argens]

Can only agree to the previous comments. Great video. Especially, on how you explained the media query part. Was searching for a solution like yours for some time but all the other videos, that I found where missing this part. So thanks a lot for your time and effort! now am going to watch it again and will implement it in my project :-).

[@academind]

Glad you enjoyed it!

[@truongnguyen-bh8vn]

Thanks a lot! Your lessons are very helpful !

[@jasonmckay2769]

So utterly perfect. Thank you.

[@deepaligarg7643]

A truly wonderful video. Very well explained and easy to follow. Thanks for making a very useful video.

[@academind]

Just awesome to read that Deepali, thanks a lot for your comment!

[@mikecastor2047]

Thank you for the great tutorial, Maximilian!

[@academind]

Happy to read that you liked it Mike, thank you!

[@pitbul67204]

This was a great video this helped me solve my problem of having my button navbar and menubar in different components and how to access all three via props.

[@academind]

Awesome to read that the video was helpful for you Robert, thank you for sharing this!

[@doubledouble3454]

And I was about to implement one for my web app, just in time!! Thanks

[@academind]

Fantastic to read that the video came at the right point in time :)

[@grahamdickey7930]

So helpful! Thank you so much!

[@ghiasali7033]

you had created many futures Thanks man

[@MattDuarte11]

This is exactly what I was looking for!

[@academind]

Awesome to read that the video came at the right point in time for you :)

[@mefuri_k]

Yep this is a nice tutorial. Now i can start using react without having to spend 7 hours doing nothing and being confused what to do.

[@vegan_cat]

I really like the type of your teaching and I am going to use your courses ! I think I can learn a lot from you🙏😊

[@academind]

Thank you for your great feedback and your support Mahdi, happy to have you on board :)

[@acsidaho]

great tutorial. thank you. cleared up a few fuzzy concepts for me.

[@academind]

So great to read that, thanks a lot for your comment!

[@swiftydecember]

THANK YOU SO MUCH FOR THIS TUTORIAL!!

[@martelinok]

Hey man thaks for the video,
It helped me a lot, thaks for sharing. Greetings from Colombia

[@academind]

Awesome to read that Kevin, greetings from Germany!

[@AliElamraniElhanchi]

What a perfect video for my project! Thanks!

[@academind]

That's really great to read Ali, thank you for your comment!

[@victorfreitas799]

Amazing job, congrats teacher!

[@AschmachS]

this video is bloody awesome. i'd already bought your udemy course but not gone through it. this reminds me to get through it asap. bloody awesome!!

[@academind]

Wow, thanks a million for this awesome feedback Anders, happy to read that and thanks a lot for your support here and on Udemy!

[@Farrukhmusicworld]

This is best tutorial in youtube of react app i love it

[@Jaigupta_]

Best I've seen so far!

[@57Javier747]

Thanks Max!! Great video!!

[@joeydikgole6005]

This tutorial is super awesome.

[@johanstivensuarezgalindo3542]

Hey bro thanks for the tutorial! You're amazing!

[@ktia87]

AWESOME TUTORIAL :) Thank you so much for sharing your knowledge :D!!!

[@academind]

Thank YOU for your amazing feedback!

[@ashishgunjal4346]

You are awesome man. learnt a lot from this

[@bakorkharkongor1983]

Thank you Very Much It is helping a lot

[@seokjjang]

AWESOME! this tutorial is so helpful to me😊

[@hormozakhavan]

Thank you. This is a great tutorial, and video. I learned a lot from it. I am looking forward to watching other videos from you.

[@academind]

So great to read that Hormoz, thanks a lot!

[@rajeshmanne9817]

Thank you so much, This video was very much helpful to me.

[@issaissifou3579]

Thank you man, very good job!

[@srithanreddysavela2845]

Amazing tutorial and by far the best one I've seen when it comes to ReactJS menu thing. But how do I close the ide drawer when a menu item is being clicked?

[@yunusemreguler232]

.spacer{
flex:1;} That's a life saver line of CSS.

[@clementesutil3154]

Awesome! Really useful, thanks!!!

[@angelxav1]

Great tutorial, as usual! One suggestion, At 43:00, you can use 'classnames' package to add classes to elements based on a condition. It's a handy tool!

[@SuperKasidit]

I will try that.

[@lapkar]

Great tutorial :) Thanks for this !

[@tobscada]

So cool tutorial.Thanks you.

[@JakoBueno]

Great video! Helped me a lot :)

[@user654321ful]

Great video, very well explained. I have just one doubt, in the final display pattern for non-mobile screen don't we show navigation side-bar all the time ?

[@derlama12]

Great video. Great template for the website I'm working on right now.

[@academind]

Awesome to read that, thanks a lot for your comment!

[@user-nr6do2xz7i]

It's very useful about your presentation to me. And I'm going to bring your idea to apply my project than It becomes an amazing project that you offering me. Thank you very much. I'm looking forward to seeing your next VDO. : )

[@idlevandal69]

Awesome tutorial, great use of best practices.

[@academind]

Thanks a lot for your great feedback :)

[@shubhamsharma5101]

maximillian swarzmuller is my star and the best teacher thank you from the deep of my heart sir #love from #india

[@MarcoPinheiro]

Learning a lot with you sir, thank you very much!

[@academind]

Thanks for your nice feedback Marco!

[@abhishekshah2592]

I have learned so much from you...

[@sun9woo]

thats beautiful Max! following you on your many udemy courses! always many thanks

[@academind]

Thanks a lot for your awesome feedback and support here and on Udemy!

[@adityagyawali]

thank you ... just really what I needed

[@academind]

Really great to read that Dexter, thank you!

[@anhphonghua2010]

Thank you very much for your tutorial . It's so helpful for me to improve my skill and project about ReactJS (y) (y)

[@johnxisde]

amazing dude! really. i love it

[@vhs-vsgitarre1107]

Thank you very much! Very good tutorial!

[@academind]

Happy to read that, thank you!

[@yunah8603]

Great tutorial!! Incredible!!!

[@tanveerahamed9978]

hey!,Really I learn a lot from this video. tq

[@jayakishore1234]

Amazing. thank You very much.

[@joseluislopez788]

Amazing video. it helped a lot

[@ratkogjurichanin8870]

Great Tutorial Love it ! ! !

[@tallitvak5325]

You're Amazing Man. thanks a lot!

[@academind]

Thanks so much Tal, this really means a lot to me!

[@PavanSibal]

Awesome tutorial.

[@mynieltech7522]

great tutorial sir!

[@NicolaeDraghici]

AMAZING! Best teacher!