Adding menu item to sidebar or horizontal menu requires to edit two files: app/js/services.js to add the menu item in list, and app/js/app.js to setup the view for the menu item.

If you want to add an item to the menu in the Xenon way follow these steps:

Note: You can also implement menu in different way and this method will fall off.

1. Open app/js/services.js
   • If you want to add sidebar menu item go to function “prepareSidebarMenu”
   • If you want to add horizontal menu item go to function “prepareHorizontalMenu”
   • Note: These functions are called in app/js/controllers.js in “SidebarMenuCtrl” and “HorizontalMenuCtrl” controllers.
2. Lets add for example “My page” menu item in sidebar (the same steps are valid for horizontal menu also)
   • Right after line 96 add this line:
   • var my_page   = this.addItem(‘My Page’, ‘/app/my-page’, ‘linecons-star’);
     • function description: addItem(menu_title, route_path, icon_class);
     • The reason why we have created “my_page” variable is for later access to add sub menu items or set label.
     • The menu item is now added to sidebar:
       
3. Now its time to connect this menu item with the route/state and display a view.
   1. Go to app/tpls/ and create file name my-page.html for example
   2. Open app/js/app.js and navigate to app.config function
   3. Add the state to $stateProvider object:
      • Create state “app.my-page” like shown here: http://pastebin.com/SpvF0RA8
        
      • This will connect the /app/my-page from the menu item with app.my-page state in the app.js and execute the given templateUrl, and this is how it will look like:
        
4. You are all set. Menu item is added successfully. If you want to add submenu item, just use the “my_page” var to add the menu item, for example:
   • my_page.addItem(‘My sub menu’, ‘-/sub-item’) – “-/” means it will be appended to the parent link “/app/my-page-sub-item”
   • Then creating new state will be like: