No Dutch
Startpagina » Blog » How to add a breadcrumb navigation to Liferay web pages Share/Bookmark

How to add a breadcrumb navigation to Liferay web pages

Op 05 november 2010 door Kristof Verbraeken in categorie Liferay

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:

$theme.breadcrumb()

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:

  • display_style_1.jsp
  • display_style_2.jsp
  • init.jsp
  • page.jsp

These are the files that are being used by the tag library to display the breadcrumb portlet. The files init.jsp and 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_1.jsp and 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.

 



Reacties

Shab Adel ()

Thank you for the article...

Stefania ()

Hallo Shab,
thank you for this article, it's very interesting.

I'm trying to resolv this problem, I hope you can help me:

I have my site setup such that the public page does nothing but show a logo and of course the Sign In button at the top right.

After a user signs in the system redirects them to the private page.

However the first crumb in the breadcrumb trail has the root URL (http://IP:8080/) and not the URL of the private home page. The problem then is if the user needs to click on this crumb to get back to the home page (which should be the private page) the user is instead redirected to the public page. This causes some confusion as they then need to use the "Go To" link at the top.

Any suggestions on how to clear this up?

Regards,
Ste

Reactie plaatsen

( Je email is veilig bij ons! )