DEV Community

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

Posted on • Updated on

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 πŸ˜‰

Top comments (25)

Collapse
 
uzodike profile image
Uzodike Oguejiofor

Github link please

Collapse
 
codebucks profile image
CodeBucks
Collapse
 
uzodike profile image
Uzodike Oguejiofor

Thanks

Collapse
 
m0nae profile image
Monae Payne

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

Collapse
 
codebucks profile image
CodeBucks

Hey, ThanksπŸ˜„

Collapse
 
eleloi profile image
eleloi

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

Collapse
 
codebucks profile image
CodeBucks

you're welcomeπŸ˜„

Collapse
 
andemosa profile image
Anderson Osayerie

The animations are cool

Collapse
 
codebucks profile image
CodeBucks

ThanksπŸ˜„

Collapse
 
peterwitham profile image
Peter Witham

Very nicely done. Thanks for sharing.

Collapse
 
codebucks profile image
CodeBucks

You're welcome πŸ˜„

Collapse
 
efleurine profile image
Emmanuel

This should work great for personal website

Collapse
 
codebucks profile image
CodeBucks

Yes it will look greatπŸ˜‡

Collapse
 
phuongnamcode profile image
PhΖ°Ζ‘ng Nam

really cool

Collapse
 
codebucks profile image
CodeBucks

Thanks :)

Collapse
 
f2aldi profile image
Aldi

Wow, really cool. Thanks for tutorial

Collapse
 
codebucks profile image
CodeBucks

You're welcomeπŸ˜„

Collapse
 
roseminted profile image
Yasmin

This is great, thank you!

Collapse
 
codebucks profile image
CodeBucks

you're welcomeπŸ˜„

Collapse
 
pixelagil profile image
Alejandro Vivas

Nice job. Thank you!

Collapse
 
codebucks profile image
CodeBucks

πŸ₯‚πŸ˜„

Collapse
 
snikhill profile image
Nikkhiel Seath

@codebucks

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

Collapse
 
codebucks profile image
CodeBucks

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

ThanksπŸ˜„