Menu items

  Written by The Jahia Team
   Estimated reading time:

Defining custom menu entries using Spring Framework

You can easily create your own menu components and associate them with some React functionality. Menu entries are created in the spring file of your module in this case /src/main/resources/META-INF/spring/commerce-io-front-end.xml.  As can be observed menu items are simply beans of time Item which contain a few properties one of which is “actionItem” which takes another bean as parameter. All you need to provide to the second bean are definition types for the main node and parent node after which a view that’s associated with each definition (in our case each of them is inheriting from ciomix:catalogNavComponent) will be used for display purposes.

Normally Jahia takes care of  menu display but in our case in order to treat ciomix:catalogNavComponent nodes specifically navmenu.groovy was overridden, you can find it in /src/main/reasources/jdnt_navmenu/html. At line 147 the type is detected and no further processing is done, the menu component will provide all required HTML and Javascript.  

Loading React components in menu

As mentioned in the previous section as long as you setup your menu in Spring correctly and have a valid node type the view for that node will be used to display menu entry on your site. It can be a very straight forward view or something a little bit more complex. An interesting component to look at is ciont_menu in /src/main/resources/ciont_menu/html. It is interesting because we use it as container for other simple menu entries.

If you look at the jsp for this component you will notice that we’ve defined a complete menu drop down structure ourselves. Note that we load SystemJS inside drop down for encapsulation purposes. What separates this component from others is that at line 67 we collect child paths. These paths will then be used to dynamically load components via ajax. The loading mechanism can be seen in the /src/main/javascript/app_navigation/commerceNavArbitrator.

Of course you don’t have to make it dynamic all the time but in some cases when you want to have configurable components a structure like that can be of great help.