React Sidebar Navigation Menu Using Hooks and Router

Learn how I created a simple sidebar navigation in React using React Hooks and React Router. You can easily refactor the code and add this to your own app or project.

You can access the complete source code down below.

You can implement this sidebar in a dashboard or use it as a mobile sidebar for a website.

The logic is fairly simple. I just created an icon and added state to it, so whenever you click on that icon it will toggle the sidebar from closed to open. You can easily switch out the icon with a website logo.

I utilize react-icons for this project. React icons allows you to import icons from multiple sources directly into your project without having to add a CDN or download any icon files.

The navigation is using React Router to change pages, but you can use Reach Router as well.

To get started, you can create a new react app or simply add the code to an existing project.

npx create-react-app react-sidebar

If you are creating a brand new project, you will want to cd into the project.

cd react-sidebar

If you wanted to add animations to the sidebar, you could look into Framer motion or react spring. I plan on creating a new version with animations, so be on the lookout for that tutorial.

I created a full video tutorial showing step by step how I created everything.

Watch the full tutorial on Youtube here

Also, I'm documenting everything I'm learning and the projects I'm building on my Youtube channel. If you want to follow me along my coding journey, be sure to subscribe here