Primefaces BreadCrumb Example

Primefaces provides different kinds of navigation components, one of among them is BreadCrumb, it’s one of the navigation component that provides contextual information about page hierarchy in the workflow. In that a steps are defined as child menuitem components in breadcrumb. By the way the creating of menuitems can be done from through one of the following way:

Declarative: Where the menuitems are defined within the breadcrumb component.
Programmatic: Where the breadcrumb component defines a MenuModel using the model attribute.

The declarative way get involved using a <p:menuItem/> Tag, whereas the programmatic way get involved using a DefaultMenuModel & DefaultMenuItem. This tutorial explains the way how to use the BreadCrumb with PrimeFaces framework. If you have any questions, please write it in the comments section.

Read : PrimeFaces Tutorials

1. PrimeFaces BreadCrumb Tag Info

2. PrimeFaces BreadCrumb Tag Attributes

3. Managed Bean

BreadCrumb.java

package net.javabeat.primefaces;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.MenuModel;

@ManagedBean
@SessionScoped
public class BreadCrumb {
	private MenuModel menuModel = new DefaultMenuModel();

	public BreadCrumb(){

		// Initialize
		this.menuModel = new DefaultMenuModel();

		// Create index menuItem
		DefaultMenuItem index = new DefaultMenuItem();
		index.setValue("Index");
		index.setCommand("#{breadCrumb.navigateIndex}");

		// Add menuItems
		this.menuModel.addElement(index);
	}

	public MenuModel getMenuModel() {
		return menuModel;
	}

	public void setMenuModel(MenuModel menuModel) {
		this.menuModel = menuModel;
	}

	public String navigateIndex(){
		// Initialize
		this.menuModel = new DefaultMenuModel();

		// Create index menuItem
		DefaultMenuItem index = new DefaultMenuItem();
		index.setValue("Index");
		index.setCommand("#{breadCrumb.navigateIndex}");
		index.setUrl("index.xhtml");

		// Add menuItems
		this.menuModel.addElement(index);

		return "index";
	}

	public String navigateHome(){
		// Initialize
		this.menuModel = new DefaultMenuModel();

		// Create index menuItem
		DefaultMenuItem index = new DefaultMenuItem();
		index.setValue("Index");
		index.setCommand("#{breadCrumb.navigateIndex}");
		index.setUrl("index.xhtml");

		// Create home menuItem
		DefaultMenuItem home = new DefaultMenuItem();
		home.setValue("Home");
		home.setCommand("#{breadCrumb.navigateHome}");
		index.setUrl("home.xhtml");

		// Add menuItems
		this.menuModel.addElement(index);
		this.menuModel.addElement(home);

		return "home";
	}

	public String navigatePrimefaces(){
		// Initialize
		this.menuModel = new DefaultMenuModel();

		// Create index menuItem
		DefaultMenuItem index = new DefaultMenuItem();
		index.setValue("Index");
		index.setCommand("#{breadCrumb.navigateIndex}");
		index.setUrl("index.xhtml");

		// Create home menuItem
		DefaultMenuItem home = new DefaultMenuItem();
		home.setValue("Home");
		home.setCommand("#{breadCrumb.navigateHome}");
		index.setUrl("home.xhtml");

		// Add menuItems
		this.menuModel.addElement(index);
		this.menuModel.addElement(home);

		// Create Primefaces menuItem
		DefaultMenuItem primefaces = new DefaultMenuItem();
		primefaces.setValue("Primefaces Tutorial");
		primefaces.setCommand("#{breadCrumb.navigatePrimefaces}");

		// Add menuItem
		this.menuModel.addElement(primefaces);

		return "primefaces";
	}
}

4. The Views

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - BreadCrumb</h2>
			<p:breadCrumb model="#{breadCrumb.menuModel}"></p:breadCrumb>
			<br/>
			<h:commandButton value="Go Home" action="#{breadCrumb.navigateHome}"></h:commandButton>
		</h:form>
	</f:view>
</html>

home.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - BreadCrumb</h2>
			<p:breadCrumb model="#{breadCrumb.menuModel}">
			</p:breadCrumb>
			<br/>
			<h:commandButton value="Go Index" action="#{breadCrumb.navigateIndex}"></h:commandButton>
			<h:commandButton value="Go Primefaces Tutorial" action="#{breadCrumb.navigatePrimefaces}"></h:commandButton>
		</h:form>
	</f:view>
</html>

primefaces.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - BreadCrumb</h2>
			<p:breadCrumb model="#{breadCrumb.menuModel}">
			</p:breadCrumb>
			<br/>
			<h:commandButton value="Go Index" action="#{breadCrumb.navigateIndex}"></h:commandButton>
			<h:commandButton value="Go Home" action="#{breadCrumb.navigateHome}"></h:commandButton>
		</h:form>
	</f:view>
</html>

5. Primefaces BreadCrumb + Programmatic Demo

6. Primefaces BreadCrumb + Declarative Demo

If you’ve decided using the BreadCrumb in a declarative manner, so the menuItem Tag will get involved for achieving that. Below you will find a sample of it.