Any site without navigation is useless. Liferay provides great support for the site’s navigation. Liferay’s Navigation portlet allows navigation through public and private pages created in the particular site. Navigation consists of the main menus, which we use to customize and configure. Even it allows developers to extend and customize the default product navigation to fulfill their requirements.
There are two main ways to define and customize site navigation:
- In the Site’s theme
- Using Navigation Module
Even these two ways of defining site navigation can be used simultaneously.
ADDING A NAVIGATION MENU APP
- Go to the welcome page
- Click the Add button (+) on the upper right and expand the Applications → Content Management category in the menu
- Drag a Navigation application on the page
- You can change the look and feel of the same from the configuration
PROBLEM IN LIFERAY’S DEFAULT NAVIGATION MENU
Let’s say, we have a page structure in our site as follow :
- Document 1
- Document 2
- Product 1
- Product 2
- Product 1
For 4 level navigation we need to check if the entries has browsable children then we need to add another ul tag for the same and need to iterate the list of the entries . If we have 3 level page structure then we need total 3 ul tags and if we have 4 level page structure then total 4 UL tags should be added to fulfil our requirement. If the Page structure level increases, then we need to check if the page has browsable children then that many times UL tags has to be added and iteration has to be done. Please find the below code snippet.
#if> #list> #if>
In the above snippet, main conditions which we need to check if the page has third children by using displayDepth and hasBrowsableChildren. If it has third children, then again iteration needs to be done as shown in the above snippet for 3rd level child to display its page name. Again, we need to check if the page has fourth children by same above mentioned step. If it has, then again looping is to be done as shown in the above snippet for 4th level child to display its page name.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
he above snippet is till 4 level navigation, if we need to add 5th level of page in the navigation then again, we need to check if the page has fifth children by same above mentioned steps. If it has, then again looping is to be done for 5th level child to display its page name. And it goes on.
Closure : A Site can have N number of page level structure and each should be displayed in the navigation menu for user to traverse the site. So after reading this blog, you will be able to have each and every page in your navigation. Was worrying for more than 2 level of page structure for navigation in your site? Now no need to worry.
This blog has been written by our Jr. Consultant Jinal Thakrar