React Sidebar Navigation Menu using React Router v6.4 - Beginner Tutorial

Learn how to create a React Sidebar Navigation Menu using React Router v6.4 in this beginner ReactJS Project Tutorial. We will create a sidebar nav menu that you can use to create in a portfolio, website, or dashboard design. We will use the latest version of React Router v6.4.2 using createBrowserRouter to make the routes.
Timeline
0:00 React Sidebar Intro
0:45 Creating React App in Terminal
3:10 Install React Dependencies
5:20 Overview of React Router v6.4.2
7:30 Creating Project Files
9:15 Creating Routes
15:30 Creating Sidebar Nav Menu
22:55 Creating Sidebar Data
25:50 Adding CSS Styles
31:20 Creating Routes without Objects
33:20 Finished Project
Check out my other Videos
Make a React Real Estate Website
• Make a React Website w...
Build a Full Stack Delivery App Using Doordash Drive API - Javascript Node Express Project
• Build a Full Stack Del...
Top 5 Website Designs Every Web Developer Should See
• Top 5 Website Designs ...
Source Code
github.com/briancodex/react-s...
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign

[@masondee4694]

Great video for this update! Definitely a little more complicated but you explained this very well. Thank you!

[@maxlerman754]

Cheers dude, I've been looking for a simple sidebar component video for ages :)

[@YOLITOPINTO]

Nice and clear! It solved my migration from v5 to v6+. Ty ✨

[@airdroptutorial4559]

now only see your video perfect staright forward easily explaination bro.out put also perfectly working tnx for the video bro

[@user-jc7gk2tm6d]

You're a life saviour, thank you

[@mounir101]

And then we get started on coding in 2042. LOL:) Thanks so much. Brian and welcome back again.

[@briandesign]

lmao my cra was taking too long to finish

[@k1dz0r90]

Awesome tutorial, thanks.
But how you push the content to right when sidebar is active

[@rafaelceballos8433]

Can you do one using to wrap it? I'm trying to see different methods to see which is the best approach.

[@Sami-jb8cx]

very good tutorial, thanks

[@mihirlakhamje9575]

Question
If an application starts with landing page and further goes to dashboard...
i wants to hide the side bar on landing page and show on dashboard.
how should i approach?

[@bilalhussainch.8098]

Thanks brother very helpful tutorial

[@designart4928]

so helpfull thankyou dude

[@user-kc6yy7gb8x]

please i need the full documentation of the css file on the video because it was not all that was display

[@easyworkouts694]

Helpful tutorial👍

[@gbengz1]

Great video!

[@fabriqr2930]

Thank You Nice Video Bro

[@mohamedyoussef8835]

Awesome video +++++++++ 🙂

[@Jgv1919]

Why app.js was not use or was it removed in the app?

[@e404]

life savior

[@89mww]

ty, docs definitely could have made this common use case more obvious for all the people who were used to 'just put the route and element shows up' in prev versions. also why is there no search on their docs??? bananas

[@gabriellopez2737]

Hey bro, do you know how to implement this in electron? I made an app with this, and it works fine in development, but error 404 in production, and I don't know why.

[@felipechaves3389]

how will you do in the content of the elements, lets say you have a card that you can click on it and that will link or push you to the page its referring to. How will the side bar work? So you are in home, inside home there is a button to go to about us, and the side bar ofcourse there was an option for about us. Will it mark as active the about us?

[@abdulazizedrisakmad3777]

thank you for showing code

[@AMoktar]

Awesome, thanks.
But what about protected routes

[@briandesign]

I can make another video about those since this tutorial is just showing a simple nav menu

[@AMoktar]

@@briandesign it is awesome tutorial, very straight forward. Thanks

[@dbiswas]

Is it possible to have React Side Bar as well as Navbar on the header on the same page.

[@sharoofskhan3118]

yes

[@rojka-_-]

bro why ur not using jsx?

[@airdroptutorial4559]

how to connect my website home to this home

[@chasethegamer57]

I copied the code from GitHub but the icons for the menu items aren't there. How do I fix?

[@briandesign]

did you install the react icons package?

[@chasethegamer57]

@@briandesign Yes but it’s ok now, I had {item.Icon} misspelled :/

[@odda123]

The main content is not responsive yet, when the sidemenu closed the main content should come to the left side of the screen

[@Julia-yw1ly]

i think u do this with the css file. google media query responsive design css. ive built a responsive website before with html and css

[@MagnusVictorinus]

Hi, Bro

[@briandesign]

yooo

[@melvinjisieike7889]

This is not a beginner video he just talks without saying anything and deosnt bother to explain just wasted my time