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๐Ÿ˜„