Simple Component for Multilevel Sidebar Menus in React

In this blog we will create a simple component for Multilevel sidebar menus in React. This will a reusable component that will receive data as props and render the sidebar navigation menus which supports N level of depth.

My Assumption is you are familiar with React Router Dom and its usage as I am using React Router Dom for Routing purpose in this application.

So let’s get Started :

Step 1: Create a Css File names MultilevelSideNav.css and put following code :

Step 2: Create a Side Nav Component named MultilevelSideNav.js with following code :

Now we will create 2 components for url handleing 1 for Showing Home page and another for showing
Page relevant information.

Step 3: Create a simple Home Component Home.js Like this:

Step 4: Create a Page Component Page.js that will show a menu Title by its Slug :

Now we are ready to Call our MultilevelSideNav Component that we have created in Step 2

Step 5: lets do the changes in App.js to call MultilevelSideNav Component :

Constructing the menu data, you may grab this data from your api as well

and Finally this will be our JSX return in App.js

Note : As I mentioned earlier as well I am using React Router Dom to handle page click and showing relevant page information once landing to any page

And Finally lets see how our App will look this :

Thats it we have created our multilevel sidebar menus in react js. if you face any issue in creating this component on your system please let me know in comments section. Also Suggestions or Feedbacks for improvement are welcome.

You may Download the complete source code by clicking this link

Published by

Jeetendra Singh

Jeetendra Singh is a Full Stack Architect who has 12+ Years of Experience into Software Development. He is a Microsoft certified technology Specialist and AWS Certified Associate Architect. His Major Interests are in Mongo Db, Express Js, React Js, Node Js (MERN STACK), Python, DJango, Redis, Mysql, Dynamo DB , Devops, Jenkins, Cloud/Lamda , Fast Api. He build variety of applications using Python, Mern, Mean, Node, JavaScript, jQuery & PHP