DEV Community

loading...
Cover image for How to create Sidebar navigation menu in ReactJS with react router and framer-motion

How to create Sidebar navigation menu in ReactJS with react router and framer-motion

CodeBucks
Hey, I'm Web Developer, Roaming around Code and Philosophy! I like to learn about web as well mobile apps everyday! 😉😄
Updated on ・1 min read

Hi there 👋,

Checkout this cool sidebar.

Here is the Demo Link:
https://react-sidebar.vercel.app/

I have created this using Styled-components, react-router and framer-motion for page transition. You can use this kind of sidebar in creating Dashboards.

For this project I have used these libraries,
▶️ reactjs
▶️ Styled-Components
▶️ react-router-dom
▶️ Framer-motion for page transition

Here is the tutorial for this Sidebar menu!

You can use this to learn or for your portfolio.

I haven't added drop-down menu yet but if you want it then you can add it and feel free to create more sections.

Any suggestions are welcomed!

Thanks For Reading😄

Feel free to visit my youtube channel:

@CodeBucks

Follow me on Instagram where I'm sharing lot's of useful resources!

@code.bucks 😉

Discussion (25)

Collapse
reenydavidson profile image
ReenyDavidson

Github link please

Collapse
codebucks profile image
CodeBucks Author
Collapse
reenydavidson profile image
ReenyDavidson

Thanks

Collapse
m0nae profile image
Monae Payne

I’m loving it, the animations are so smooth!

Collapse
codebucks profile image
CodeBucks Author

Hey, Thanks😄

Collapse
eleloi profile image
eleloi

Ei, just what I've been searching for! Thank you a lot

Collapse
codebucks profile image
CodeBucks Author

you're welcome😄

Collapse
andemosa profile image
Anderson Osayerie

The animations are cool

Collapse
codebucks profile image
CodeBucks Author

Thanks😄

Collapse
peterwitham profile image
Peter Witham

Very nicely done. Thanks for sharing.

Collapse
codebucks profile image
CodeBucks Author

You're welcome 😄

Collapse
efleurine profile image
Emmanuel

This should work great for personal website

Collapse
codebucks profile image
CodeBucks Author

Yes it will look great😇

Collapse
phuongnamcode profile image
Phương Nam

really cool

Collapse
codebucks profile image
CodeBucks Author

Thanks :)

Collapse
f2aldi profile image
Aldi

Wow, really cool. Thanks for tutorial

Collapse
codebucks profile image
CodeBucks Author

You're welcome😄

Collapse
roseminted profile image
Yasmin

This is great, thank you!

Collapse
codebucks profile image
CodeBucks Author

you're welcome😄

Collapse
pixelagil profile image
Alejandro Vivas

Nice job. Thank you!

Collapse
codebucks profile image
CodeBucks Author

🥂😄

Collapse
snikhill profile image
Nikhil Seth

@codebucks

Thank you for sharing the same. I was unaware about Framer Motion until now.

Collapse
codebucks profile image
CodeBucks Author

It's really good library for animations and all stuff. You can try a lot of things with it. Give it a try😄

Collapse
deepaksingh profile image
Deepak Singh

really cool this👍👍

Collapse
codebucks profile image
CodeBucks Author

Thanks😄