Liferay is easy: Navigation menu with liferay-ui:icon menu Tag

In liferay we can create a menu by simply using Liferay ui tag.So in this tutorial we create a table and in one column we give menu tab for various operations so lets start this step by step:-

Step 1:-Create Liferay Project and Portlet
Just create a project and then create a portlet in it.

Step 2:-Change view.jsp
Open view.jsp and paste this content:-

view.jsp

	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
	<portlet:defineObjects />

	<portlet:actionURL name="delete" var="deleteURL"/>
	<portlet:actionURL name="edit" var="editURL"/>
	<portlet:actionURL name="custom" var="customURL"/>

	<table>
	<tr>
	<th>Name</th>
	<th>Address</th>
	<th>Action</th>
	</tr>
	<tr>
	<td>Liferay is Easy</td>
	<td>Delhi India</td>
	<td>

	<liferay-ui:icon-menu >

	<liferay-ui:icon image="edit" message="Edit" url="<%= editURL.toString() %>"/> <!-- sourcecode\portal-web\docroot\html\themes\_unstyled\images\common -->
	<liferay-ui:icon-delete url="<%= deleteURL.toString() %>" /> <!-- Automatically take delete icon image -->
	<liferay-ui:icon iconCssClass="icon-facetime-video" message="Video Tutorials" url="https://www.youtube.com/channel/UCVIWn7o3162j_lJFJfs7mDA/playlists"/> <!-- http://nickpiesco.github.io/alloy-ui-font-awesome-cheatsheet/ -->
	<liferay-ui:icon image="custom" src="/icon-menu-portlet/icon/phone.png" url="<%= customURL.toString() %>" /> <!-- Custom icon -->

	</liferay-ui:icon-menu>

	</td>
	</tr>

	</table>

view raw view.jsp hosted with ❤ by GitHub

Explanation:-
1) <liferay-ui:icon image="edit" message="Edit" url=""/>
In this tag we use image="edit" you can use various images which can be found in source code of liferay.

Path for images:-
sourcecode\portal-web\ docroot\ html\ themes\ _unstyled\ images\ common

2) <liferay-ui:icon-delete url="" />
If we use icon-delete tag it automatically take delete icon image.

3) <liferay-ui:icon iconCssClass="" message="" url=""/>
Here you provide message and iconCssClass the value of iconCssClass can be found on this link.

4) <liferay-ui:icon image="" src="path of image" url="" />
If you want to use your own icon you can create a folder inside docroot and provide the path in src.

Step 3:-Change Controller
Open your java file and paste this:-

Demo.java

	package com.demo;

	import java.io.IOException;
	import javax.portlet.ActionRequest;
	import javax.portlet.ActionResponse;
	import javax.portlet.PortletException;
	import com.liferay.util.bridges.mvc.MVCPortlet;

	public class Demo extends MVCPortlet {

	public void edit(ActionRequest actionRequest,ActionResponse actionResponse) throws IOException, PortletException {
	System.out.println("Edit Clicked......");
	}
	public void delete(ActionRequest actionRequest,ActionResponse actionResponse) throws IOException, PortletException {
	System.out.println("Delete Clicked.....");
	}

	public void custom(ActionRequest actionRequest,ActionResponse actionResponse) throws IOException, PortletException {
	System.out.println("custom Clicked.....");
	}
	}