Search code examples
javaliferayliferay-6liferay-themeliferay-aui

Left Navigation Menu :Liferay 6.2

I am in the process of migrating my current web application to liferay.I have requirement to customize left navigation bar according to my app. For e.g. I have left side vertical navigation menu with items as below

Home
Company Info
Revenue Details

When clicked on each of the menu items separate portlet would be opened in the right content pane. For instance,company information should go to to the custom company portlet I have created .

Could you please help me understand how can I acheive this in Liferay 6.2? Thank you.

Solution
    1. If you want to display portlets deployed on a page using left navigation bar then you can use Panel Pages. Search for "Panel Pages" section on this page.
    2. If you want to have the liferay page navigation itself as a vertical bar instead of horizontal then you can create Theme to style the navigation. navigation.vm is the file you are looking for.

    As per the comment below, here are my suggestions:

    Suggestion I

    1. Use 30-70 layout.
    2. On the 70-side (right-hand) you can put all your portlets one after another.
    3. On the 30-side (left-hand) you can put a web-content display portlet.
    4. So in the web-content display portlet, in the editor you can use Source tab to include javascript/css/html for the clickable links to portlet.
    5. There are various javascript libraries available for giving scrolling effect on click of the link.

    Suggestion II

    1. This is also similar suggestion, atleast the concept is the same.
    2. the only difference is that you can have a custom layout with web-content already embedded in the layout and also have the libraries and javascript written in the layout.

    Suggestion III

    1. if you want automated left navigation pane i.e. when the page loads it has the portlet-name and links to the portlets on the right side without manual intervention.
    2. This would require a lot of coding inside layout.
    3. You can utilize the different variables available in the layout to find the portlets on the page and create the links.
    4. Have a left section in layout and populate the links found in (3) and the right side would be as usual.

    You can utilize the portlet-Ids or css classes for scrolling to them when a particular link in web-content is clicked from the Look & Feel tab from Configuration tab as follows:

    enter image description here

    Hope this helps.