This article is dedicated to give a step-by-step guide on how to add a new menu item to the horizontal navigation.

This can be achieved in following 3 steps:

1. Create a Page
   

   All of the pages in Wieldy are placed/created under the folder location:

   src/routes/{folder name based on page name}

   In the example here, we are going to create a new page “About Us”. In order to do that, we are going to create a folder “About Us” inside the src/routes/.

   Now, we will create a file index.js inside this “AboutUs” folder which will represent AboutUs page component.

   After this, the folder structure will look like as given in following figure:

   Screenshot to show the structure of src/routes/AboutUs/Index.js

   

   Then we will write the code in index.js to create our AboutUs page component. Following is the sample page component structure you can follow:

   Screenshot with sample structure. Check in register.

   So, our index.js file will look like as below:

   

   Here the source code will go for AboutUs page component

2. Create a Route
   

   In this step, we are going to create a route for our newly created About Us page.

   To add a main route, we need to open the file src/routes/index.js

   Here, we will ada new route which we will then link to our AboutUs page component. Below is the source code which will do it for us when we add this to the above mentioned file:

   Source code from register

   

   In above source code asyncComponent() is being used to implement the async loading.

3. Add a menu item
   

   So far, we have create a page and added a route which will take user to that page when accessed in browser directly.

   Now, in this final step, we are going to add a menu item which user can click to access that route.

   To add a new menu item in horizontal navigation bar, we will need to add the menu item in both horizontal and vertical navigation bars as we are showing vertical navigation bars on smaller size screens.

   Add to Horizontal Navigation Bar

   So, let’s add the new menu item to the horizontal navigation bar which will show on desktop or larger screen resolutions.

   To do so, we will need add the below code to the file src/containers/Topbar/HorizontalNav.js

   Source code structure from register

   

   Add to Vertical Navigation Bar

   Now, let’s add the menu item to the vertical navigation bar and this will show on small devices like smartphones.

   To do that, we will need to reach to the file “SidenavContent.js which can be found under src/containers/SideNav/SidenavContent.js

   Now, here in this file SidenavContent.js, we will look for the <Menu.Item> tag which represents default menu item “Sample Page” in the starter template.

   Following is a screenshot for reference:

   Screenshot of li tag for sample page menu.

   Now, here you can add your own menu item as per given in below sour code:

   Source code structure

   

   We hope this article was helpful to you.