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

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

You might also like these website templates:

• A beautiful portfolio template in ReactJS => here
• NFT collection landing page in ReactJS => here

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

@code.bucks 😉

Comments

[Uzodike Oguejiofor]

Github link please

[CodeBucks]

Here it is github.com/codebucks27/react-sideb... 😇

[Uzodike Oguejiofor]

Thanks

[Nikkhiel Seath]

@codebucks

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

[CodeBucks]

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

[Anderson Osayerie]

The animations are cool

[CodeBucks]

Thanks😄

[eleloi]

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

[CodeBucks]

you're welcome😄

[Peter Witham]

Very nicely done. Thanks for sharing.

[CodeBucks]

You're welcome 😄

[Emmanuel]

This should work great for personal website

[CodeBucks]

Yes it will look great😇

[Phương Nam]

really cool

[CodeBucks]

Thanks :)

[Aldi]

Wow, really cool. Thanks for tutorial

[CodeBucks]

You're welcome😄

[Yasmin]

This is great, thank you!

[CodeBucks]

you're welcome😄

[Deepak Singh]

really cool this👍👍

[CodeBucks]

Thanks😄