Create a Sidebar Menu in React js

Do you need a sidebar navigation menu for your next React.js project? Here I came up with a tutorial on how to create a sidebar menu in React js. Yesterday I was working for one of my clients and his design requires me to create a sidebar navigation menu that can also collapse. So let us see how I created that menu.

Requirements

• react-pro-sidebar
• react-icons

1. Create a react project.

npx create-react-app
#or
yarn create react-app yourprojectname

2. Follow the below diagram to create our folders and file structure.

3. Now open the terminal and install the required modules.

npm i react-pro-sidebar react-icons
#or
yarn add react-pro-sidebar react-icons

4. Now open the Header.js file and paste the below code.

Note: I have explained everything using javascript comment inside the code. Remove every comment in production.

5. Now it’s time to add some styling to our menu. Paste the below code in the Header.css file.

6. Now import the Header component to your App.js file.

Voilà here is the output

Below I have shared live code and GitHub repository for reference.

Mediumtutorial/react-sidebar-menu-medium