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

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

Top 5 Website Designs Every Web Developer Should See

Source Code

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

[melvinjisieike]

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

[Jgv]

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

[gabriellopez]

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.

[YOLITOPINTO]

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

[Notyoubiz]

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

[felipechaves]

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?

[mww]

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

[mihirlakhamje]

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?

[dbiswas]

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

[RaphealOhihon]

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

[airdroptutorial]

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

[kdzr]

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

[maxlerman]

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

[odda]

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

[AMoktar]

Awesome, thanks.
But what about protected routes

[airdroptutorial]

how to connect my website home to this home

[masondee]

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

[mounir]

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

[JorgeTobarra-rl]

You're a life saviour, thank you <3

[chasethegamer]

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