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

Build a Full Stack Delivery App Using Doordash Drive API - Javascript Node Express Project

Source Code

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

[phxobis]

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

[randomperson]

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.

[hiwotina]

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

[reactjs]

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

[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.

[analistadesistemas]

Awesome!! just need a submenu feature...

[yhxnxnz]

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

[charlottecayre]

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

[Matias-nulk]

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

[shahnawazattar]

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

[GatorGrad]

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.

[stanleylafond]

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.

[anelisefagundes]

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

[blixoney]

Try vite instead of create-react-app 👍🏼

[David-fkqj]

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 <Router> inside another <Router>. " Can you make a video about this?