Read custom field's value of Navigation Menu

Read Navigation Menu’s custom field value in Liferay 7.3


Liferay 7.3 comes with very good feature, one of this is we can create a custom field for the navigation menu. Custom field for navigation menu used to store the extra information regarding the page/link. It can be used to create the megamenu for the site.


Let’s start how we can do this.


[1] Create Custom Field

So, first of all we will create one custom field for the navigation menu, as shown in the below images I have created one custom field with the type “TEXT”.



Custom field name is “DellDescription” with the data type “TEXT”.

[2] Create Menu

We have created one custom field, now we will create one menu for the same site. To create the menu go to  “Site è Navigation Menus” . Create navigation menu by clicking on “+” button as shown in the below image.


[3] Add value to custom fields

To add value into the custom field, go to “Site è Navigation Menus” and select the menu created in the previous section. Here you can see pages, links you have added into the menu. select the page as shown in below image its shows you the custom field you have created in the control panel . Insert the value for this selected page.

Insert the value for all the page, links by selecting one by one. Here I have created navigation menu named “Menu_1”.


[4] Create widget template for navigation menu.

Now we need to create the widget template [ ADT ] for the navigation menu which we created in the last step. go to “Site è Widget Templates” create the navigation template by clicking on the “+” button. I have created the navigation template named “ACN Menu” see below images




[5] Select the navigation menu and widget template

Now go to the home page of the site. select the configuration of the Navigation Menu. In this, select the menu you have created in the above steps and select the Display template which we created in the last step. I have created menu named “Menu_1” and template named “ACN Menu” as shown in the below images.

[6] Check on home page

Now we can check on the home page that its showing the custom field’s value when we hover the navigation as shown in below image.




That’s it. How to read the custom field’s value in the navigation.