React Navbar Tutorial Responsive - 3 Designs

Learn how to build a React Navbar in 3 different ways. You can easily customize this design to fit your project. They are fully responsive and all you need to do is add a custom dropdown menu in the mobile view.

React Website with Mobile Dropdown

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

Timeline:
0:00 What we are building
1:31 Creating React App
4:04 Creating Navbar Component
6:19 Installing Dependencies
7:22 Adding Navbar JSX
11:02 Styling Navbar
25:00 Creating Pages

Source Code:

[ryanridwan]

Bro, You deserve more appreciation, since you put a lot of effort on your tutorial, especially for the design

[simple]

your way of teaching is like explaining everything that everyone can understand Thanks man for helping us

[BigToasti]

hey brian thank you for helping me i am very grateful for that.
I was a little confused about the yarn add command but with npm install it works like you said.
I just started with react today so it was hard for me in the beginning. I made a few small mistakes
Now I am a bit further into my project.
Thanks a lot for your effort!

[alfyxxxxx]

Surprised this video only has 2k likes, it's very thorough and well explained. This kind of Navbar is on almost every website. Cheers for the video mate!

[nichijoufan]

If anyone gets some problems:
In react-router-dom v6, "Switch" is replaced by routes "Routes", so:
<Switch> is now <Routes> and component={Home} is element={<Home/>}

[malithaliyanage]

Nicely explained. Thanks for the amazing work dude!

[warlock]

Bro keep it up. Really Good Content. You will hit 1 Million faster than you think. :)

[mugiwaranoshanks]

dude you are amazing !!! keep up with the incredible and soooo inspiring work

[MuhammadYousuf-chqm]

Amazing video 🔥, thanks for helping us out much needed react video 😍

[mateuspaula_dev]

Thanks for the video broh, i will apply this navigations in my projects!! <3

[darmar]

Great tutorial for the use of flex box and how it can be so responsive

[Minda]

Thx for you great job man! It helps a lot, congrats!

[TheJFMR]

You could have added to open the navbar menu when the window is minimized

[chakirfri]

Subbed immediatly, thanks for the free valuable content

[elangeniyabba]

Thanks for all of these videos. I was really struggling with react until I found your channel

[theteconotiam]

Hi Brian, Thanks for your tutorial. I am a new react learner and your videos really help me. One thing I want to know is, can you please tell me which theme you use in the visual studio? Is there any video to install this theme and text style? I really like your studio interface.

[stevenb]

HI Brian, thanks for making these videos theyre assisting me greatly with learning react! I was wondering how to add an active class to the side navbar tutorial you did a couple of months ago? I'm struggling to figure out a way myself! Thanks

[alekseytrump]

Cool. Best youtube channel! Please, more styled components library videos)

[mohsenpedramnia]

Awesome! you are my ideal, I copy you. Thank you Brian

[erroldtumaque]

i think it wouldve been useful to have your css live compile and see the changes youre making instead of having the error screen on the right

otherwise people are just literally copying what you're typing without knowing what's happening/going to happn