1. Home
  2. Development
  3. How to customize the content of navigation menu in Liferay

How to customize the content of navigation menu in Liferay

Karl Chin, modified 8 Years ago.
How to customize the content of navigation menu in Liferay
Junior Member Posts: 28 Join Date: 10/5/16 Recent Posts
Hi Experts,

I am working on a portal project using Liferay 7 GA4. How can I customize the navigation menu?

I have checked navigation.ftl in a theme project and there is a section for showing the menu.

<@liferay.navigation_menu
			instance_id="main_navigation_menu"
			default_preferences="${freeMarkerPortletPreferences}"
		/>


After some googling, hook may be a direction. However, it is also said that OSGi module is the preferable way for customization.

Therefore, here is the question:
Which jsp is being used to control the behavior of com.liferay.site.navigation.menu.web OSGi module?

All the best,
Karl Chin
thumbnail
Massimo Bevilacqua, modified 8 Years ago.
RE: How to customize the content of navigation menu in Liferay
Regular Member Posts: 210 Join Date: 12/27/16 Recent Posts
I don't know if I understand your question...but try also to check site_pages.ftl
Karl Chin, modified 8 Years ago.
RE: How to customize the content of navigation menu in Liferay
Junior Member Posts: 28 Join Date: 10/5/16 Recent Posts
Hi Massimo,

I cannot find site_pages.ftl in the source. Where is the file location? under ../templates? Could you please provide some sample code on that?

TIA.

All the best,
Karl Chin
thumbnail
Massimo Bevilacqua, modified 8 Years ago.
RE: How to customize the content of navigation menu in Liferay (Answer)
Regular Member Posts: 210 Join Date: 12/27/16 Recent Posts
Hi,

I guess I found it in a theme called atrek and the file is "sitepages.ftl"

put it inside templates folder

<h2><span>Site Pages</span></h2>
	<ul>
		&lt;#assign  count = 0 /&gt;
		&lt;#list nav_items as nav_item&gt;
			&lt;#assign  count = count +1  /&gt;
			&lt;#assign  nav_item_class = "item-" + count /&gt;
	
			&lt;#if count == 1&gt;
				&lt;#assign  nav_item_class = nav_item_class + " first" /&gt;
			<!--#if-->
	
			&lt;#if nav_item.isSelected() &gt;
				&lt;#assign nav_item_class = nav_item_class + " selected" /&gt;
			<!--#if-->
			
			<li class="${nav_item_class}">
				<a href="${nav_item.getURL()}" ${nav_item.gettarget()}>
					<span>${nav_item.getName()}</span>
				</a>
			</li>
			
			&lt;#if nav_item.hasChildren()&gt;
				&lt;#list nav_item.getChildren() as nav_child&gt;
					&lt;#if nav_item.isSelected()&gt;
						<li class="selected sub">
					&lt;#else&gt;
						</li><li class=" sub">
					<!--#if-->
							<a href="${nav_child.getURL()}" ${nav_child.gettarget()}>${nav_child.getName()}</a>
						</li>
				<!--#list-->
			<!--#if-->
		<!--#list-->
	</ul>
Karl Chin, modified 8 Years ago.
RE: How to customize the content of navigation menu in Liferay
Junior Member Posts: 28 Join Date: 10/5/16 Recent Posts
Hi Massimo,

Thanks for your code.

Can I just change some .js to fulfill the customization on the content of the navigation menu? Actually, I am trying to search in the source but not yet identified which one does the work. emoticon

All the best,
Karl Chin
thumbnail
Massimo Bevilacqua, modified 8 Years ago.
RE: How to customize the content of navigation menu in Liferay
Regular Member Posts: 210 Join Date: 12/27/16 Recent Posts
I have never overide liferay JS, I only added some function inside my code.
Try to write your function and add it inside your sitepage.ftl otherwise you can search on google how to insert your js file in liferay
Karl Chin, modified 8 Years ago.
RE: How to customize the content of navigation menu in Liferay
Junior Member Posts: 28 Join Date: 10/5/16 Recent Posts
Hi Massimo,

You code in sitepages.ftl will work on web, however, it is still not mobile responsive.

I can see there is a code in navigation.ftl.

		&lt;@liferay.navigation_menu
			instance_id="main_navigation_menu"
			default_preferences="${freeMarkerPortletPreferences}"
		/&gt;


I am wondering if we can customize it (liferay.navigation_menu)?

I can only see some guideline on the customization of product menus. (https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/product-navigation)


All the best,
Karl Chin
thumbnail
Massimo Bevilacqua, modified 8 Years ago.
RE: How to customize the content of navigation menu in Liferay
Regular Member Posts: 210 Join Date: 12/27/16 Recent Posts
Hi,

are you sure it is not responsive?I use sitepages in my theme and it is responsive.

By the way if you need to customize navigation menu you can change navigation.ftl, sitepages.ftl and put your css style inside _custom.scss.

My suggestion is: take an existing free theme (porygon or 1975 London) and look inside the code(templates, css....) in this way you can understand how customize navigation menu(in porygon theme you can find _header.scss and _navbar_porygon.scss).

Best regards

Massimo
Karl Chin, modified 8 Years ago.
RE: How to customize the content of navigation menu in Liferay (Answer)
Junior Member Posts: 28 Join Date: 10/5/16 Recent Posts
Hi Massimo,

Yes, you are right. Your code is responsive to mobile.

Therefore, together with what's in https://web.liferay.com/community/forums/-/message_boards/message/94161220, I have add the following code in sitepages.ftl in the templates folder in a custom theme to customize my navigation menu.


<div aria-expanded="true" class="collapse navbar-collapse" id="navigationCollapse">
<ul class="nav navbar-nav">    
        &lt;#assign  count = 0 /&gt;
        &lt;#list nav_items as nav_item&gt;
            &lt;#assign  count = count +1  /&gt;
            &lt;#assign  nav_item_class = "item-" + count /&gt;
    
            &lt;#if count == 1&gt;
                &lt;#assign  nav_item_class = nav_item_class + " first" /&gt;
            <!--#if-->

            &lt;#if nav_item.isSelected() &gt;
                &lt;#assign nav_item_class = nav_item_class + " selected" /&gt;
            <!--#if-->
            
            <li class="${nav_item_class}">
                <a href="${nav_item.getURL()}" ${nav_item.gettarget()}>
                    <span>${nav_item.getName()}</span>
                </a>
            </li>
            
            &lt;#if nav_item.hasChildren()&gt;
                &lt;#list nav_item.getChildren() as nav_child&gt;
                   &lt;#if nav_item.isSelected()&gt;
                        <li class="selected sub">
                        </li>
                    &lt;#else&gt;
                       <li class="sub">
                    <!--#if-->
                            <a href="${nav_child.getURL()}" ${nav_child.gettarget()}>${nav_child.getName()}</a>
                        </li>
                <!--#list-->
            <!--#if-->
        <!--#list-->
    
		&lt;#assign linkUrl = themeDisplay.getPortalURL() /&gt;
        
		&lt;#assign screenName = themeDisplay.getUser().screenName /&gt;
		
			<li class="${nav_item_class}">
				<a href="${linkUrl}/user/${screenName}">My Dashboard</a>
			</li>
		
			<li class="${nav_item_class}">
				<a href="${linkUrl}/web/lportal/sign-out">Sign Out</a>
			</li>
  </ul>
    </div>


Also remember to apply the sitepages.ftl in portal_normal.ftl by changing the code like:

					&lt;#if has_navigation&gt;
						&lt;#--include "${full_templates_path}/navigation.ftl" /--&gt;
						&lt;#include "${full_templates_path}/sitepages.ftl" /&gt;
					<!--#if-->


You really save my day, thank you very much! Expert!

All the best,
Karl Chin