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


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


Step 4:-Check output
Deploy the portlet and add to page:-

Project Structure:-

You can Download Source code from  Navigation menu with liferay-ui:icon menu Tag. 

Hope this will Help....

Related Post:-

Create tabs in Liferay

Categorization in web content

Fetch Web Contents Programmatically

Get Journal Article Fields Programmatically

Embedding a Portlet in Web Content

Creating tabs using Web Content

Embedding a Web Content/Journal Article in a Portlet

Index Post Processor Hook