React Navbar Responsive Using React Router v6.4 - Beginner Tutorial

React Navbar Responsive Using React Router v6.4. We will create a website Navbar menu using React JS and React Router v6.4.3 in this beginner tutorial. We will use the new NavLink from React Router v6.4 to create an active menu effect and it is fully responsive for mobile and tablets.
Timeline
0:00 React Navbar Intro
1:02 Creating React App
4:14 React Router v6.4 docs
4:40 Creating First Routes
10:00 Creating Navbar Component
11:36 Adding React Icons
16:04 Adding Navbar Component
22:12 React Router NavLink
34:20 Finished React Project
Watch my other Coding Videos
React Sidebar Navigation Menu using React Router v6.4 - Beginner Tutorial
• React Sidebar Navigati...
Build a Full Stack Delivery App Using Doordash Drive API - Javascript Node Express Project
• Build a Full Stack Del...
Source Code
github.com/briancodex/react-n...
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign

[@randomperson9282]

Honestly I gotta say this friend but I really do appreciate that you call out the shortcut commands example: shift + click to select all files and folders etc etc plz continue this I just wanted to let you know this.

[@user-ph5xo4bi7s]

Thank you very much, you helped me understand how to build the menu with the new version

[@reactjs4862]

Nice job bro,
i've watch your every reactjs tutorials ,
I learn so many things in your videos

[@briandesign]

I appreciate that!

[@reactjs4862]

@@briandesign please make a video on floting inputs .. please

[@hiwotina26]

Learning a lot from you. Keep it up! You are helping many.

[@briandesign]

Awesome to hear! thanks

[@Speeep]

Awesome video bro 👊

[@shairapenserga533]

You're the best thank you❤

[@almar5635]

Thank you

[@Alejo-Epico]

This illustrious tutorial was the singular resource that enabled me to gain a comprehensive understanding of the subject matter and execute an entire project with proficiency. I offer my heartfelt gratitude for your invaluable guidance and mentorship.

[@NinaHolcomb]

6:14 6:15

[@NinaHolcomb]

6:41 6:43

[@NinaHolcomb]

❤

[@MegaTommy105]

My Boi Brian!!!!!!!!!!!!!!!!!!

[@analistadesistemas]

Awesome!! just need a submenu feature...

[@user-yh1xn5xn1z]

I watch your videos in Russia. These are the best videos on the world. Sorry for my english)

[@briandesign]

Thank you for watching!

[@mendozanavarrojesusjeampoo964]

Good video 👍👍

[@Matias-nu8lk]

why not use the jsx extensions with the styled-component?

[@GatorGrad929]

Trying to follow along, but I am using both app.js and index.js. I have the navigation bar on the screen, but when i click on the links I see the information from the About page and also the information from app.js. I'm not sure how to fix that.

[@charlottecayre]

Hello
Great tutorial thanks! My background is not going black and homepage is now returning our ErrorPage. Any ideas? Thanks.

[@stanleylafond4650]

It's no longer necessary to import react into your component pages.
The video was very helpful. My only complaint is the font size was very small even when compared to similar videos that us VS code.

[@gonzalorocamora4399]

that's nat a good practice sir

[@blixoney7237]

Try vite instead of create-react-app 👍🏼

[@shahnawazattar7991]

Good video but want some serious project like messenger cloning with firebase

[@David-fk9qj]

Hello!! Whats about if i want to separate childrens routes in another file? i mean for code organization, i don't know how to call that file (and idk what to write in that file) inside the createBrowserRouter, i tried but i get "You cannot render a inside another . " Can you make a video about this?

[@briandesign]

like a multi level dropdown menu?

[@anelisefagundes]

I hope in a year I'll find this easier cause rn its so hard 😂