React Sidebar Navigation Menu Tutorial 🤩 [ Using Router + Page Transition with Frame-Motion ]

Build Sidebar navigation menu in ReactJS with react router and framer-motion for cool page transition effects😇

Hi there 👋,

In this video we're going to build cool react sidebar using react-router and framer-motion.

(Make sure to install all the required files 👇)

Starter-Code Files👇:
Write this whole line in your command Prompt,

For this project we're going to use,
▶️ React Hooks
▶️ Styled-components
▶️ React-router-dom
▶️ Framer-motion

Don't forget to watch whole videos, we're going to learn a lot of stuff like,
▶️ React Hooks
▶️ Creating hamburger menu effect purely in css
▶️ How we can leverage advantages of react router (Navlink)
▶️ How to use Framer-motion for page transition animation

TimeStamps🕒:

Channel Intro: @0:00:00
Demo: @0:00:10
Installation & Setup: @0:01:00
Initial cleaning and styling: @0:04:00
Building Sidebar Component: @0:08:15
Add more pages to navigate : @0:50:58
Adding Router : @0:52:10
Let's add Framer-motion: @1:03:48

Watch whole video in order to understand so that you can easily build and customize sidebar on your own projects and also learn page transition using framer-motion and react-router.

[ Note🙏 : Sorry for few glitches in the video I have to reconfigure OBS settings to record quality video ]

[𝐈 𝐬𝐭𝐫𝐨𝐧𝐠𝐥𝐲 𝐬𝐮𝐠𝐠𝐞𝐬𝐭 𝐲𝐨𝐮 𝐭𝐨 𝐰𝐫𝐢𝐭𝐞 𝐜𝐨𝐝𝐞 𝐚𝐥𝐨𝐧𝐠 𝐰𝐢𝐭𝐡 𝐦𝐞 𝐬𝐨 𝐲𝐨𝐮 𝐜𝐚𝐧 𝐥𝐞𝐚𝐫𝐧 𝐭𝐡𝐞 𝐟𝐥𝐨𝐰 𝐨𝐟 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐭𝐡𝐢𝐬]

𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀!

In upcoming videos, I'm going to create lots of cool stuff with JavaScript and react so make sure to subscribe.

Like, Sub🥂 & Share! ♥

Learn More About,

Build Responsive website with ReactJS, Styled-Components & GSAP❣️:

If you want to learn Redux as a beginner here is Tutorial for you 💖:

Build Devto Clone in React:

Build Awesome stuff with ReactJs (Playlist) :

React Advanced Topic (Playlist) :

If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.

Thank You for watching! 😉

Music Credits🎵:

Where else you can find me:

Disclaimer:
All videos are for educational purpose and use them wisely. Any Resources used in this video are for educational purpose only.

#ReactSidebar
#SidebarinReactJS
#ReactSidebarMenu

[CodeBucks]

Hey people,
I'd suggest you to add more menus like create drop-down and you can add this sidebar to your Dashboard projects!
Also, you can change animations for page transition.😄
Feel free to modify it according to your need and make best out of it 😇

[tundeakinola]

I wish this can be done with next.js and tailwind css... Nobody uses styled components anymore

[shamaanpat]

heyy, nice slidebar ...thanks for the code n everthing. Just need help with this error Failed to compile

Can't import the named export 'Children' from non EcmaScript module (only default export is available) .. thanks in advance !!

[elvisear]

Hello guys.
I have an error that I have not been able to resolve.

"Cannot destructure property 'future' of as it is null.
TypeError: Cannot destructure property 'future' of as it is null."

This error returns when I place the "NavLink" prop on the "const Item = styled(NavLink)" line.

Please help me solve it.

Thanks!

[kamalCode]

Plz speak for understanding of code for user

[nkitkanjiya]

can you add Curd operation in it, please most of the people looking for this it will be most helpful..!

[arnogramsma]

I get a error: TypeError: Cannot read property 'location' of undefined react. But don't know what i did wrong. (just starting programming)

[syaifulfitrawan]

Error: Invariant failed: You should not use <NavLink> outside a <Router>

[cythnyh]

This is a great navbar but it goes behind anything you put within the pages. How do you bring it to the front?

[touseefibnkhaleel]

kindly talk instead of putting the background music (which is really annoying) otherwise your content is good.