Creating menu entries

December 21, 2021

Defining custom menu entries using Spring Framework

You can easily create your own menu components and associate them with React functionality. Menu entries are created in the spring file of your module located here: /src/main/resources/META-INF/spring/commerce-io-front-end.xml.  Menu items are simply beans of type Item which contain properties such as actionItem which takes another bean as parameter. You only need to provide the second bean with definition types for the main node and parent node. Then, the view associated with each definition (or in the example, they are inherited from ciomix:catalogNavComponent) will be used for display purposes.

Normally Jahia provides menu displays.  In this case, 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 performed. The menu component will provide required HTML and Javascript.  

Loading React components in a menu

If you ensure that you correctly setup your menu in Spring and have a valid node type, the view for that node will be used to display the menu entry on your site. You can use a simple view or an advanced view.

Before building your own menu, consider examining the ciont_menu. The menu is a container for other simple menu entries and is located in the /src/main/resources/ciont_menu/html file.  The JSP for the component defines a complete menu drop-down structure. The SystemJS is loaded inside the drop down for encapsulation purposes. The HTML at line 67 collects child paths that will be used to dynamically load components through Ajax. You can view the loading mechanism in the /src/main/javascript/app_navigation/commerceNavArbitrator file. Note that you do not always need dynamic loading, but consider doing so when you require configurable components.