How to add a breadcrumb navigation to Liferay web pages
Today I will be talking about adding a breadcrumb navigation to Liferay web pages. For people that don’t know what this is I suggest reading this Wikipedia article about breadcrumb navigation. I assume that most (Liferay) web developers that land on this page know what a breadcrumb navigation is.
Liferay comes with a breadcrumb portlet by default. You could add this portlet manually to all your web pages where you want a breadcrumb navigation, but for bigger (mostly existing) Web sites with many web pages this can be a time-consuming task.
Liferay offers a direct solution for this: you can embed portlets within a Liferay theme, which mainly consists of Velocity templates.
You simply need to add this line of code in your Velocity template and the breadcrumb should appear:
Easy! Right? But off course, many of you developers out there would also like to customize the default breadcrumb.
If you want to customize the breadcrumb portlet, I suggest you do this in the Extension Environment or with a Liferay Hook.
The only file that seems useful for customizing the breadcrumb portlet is
/html/portlet/breadcrumb/view.jsp, but this JSP file contains nothing but a tag library statement:
<%@ include file="/html/portlet/breadcrumb/init.jsp" %>
Liferay uses a tag library to display the breadcrumb portlet, so the files we need are in a different location. In the directory
/html/taglib/ui/breadcrumb you see the following files:
These are the files that are being used by the tag library to display the breadcrumb portlet. The files
page.jsp are used to initialize the JSP part of the tag library and display it’s output. You do not need to customize these files, you can leave them as they are.
The files we really are interested in are
display_style_2.jsp, because in these files the HTML markup of the breadcrumb is generated. There are 2 JSP files for this purpose, because you can configure the breadcrumb portlet using
javax.portlet.PortletPreferences to show the navigation in different styles (HTML structure). You will only need to customize one of these files for your own custom breadcrumd navigation, so consider that you customize
display_style_1.jsp, also make sure that the breadcrumb portlet is configured to display in this style.