All Learning

Java, Java EE, Android, Python, Web Development Tutorials

Java Programming

Primefaces Menu, MenuBar, MenuButton, TieredMenu, SlideMenu Example [Latest]

Byadmin

Oct 23, 2022
Primefaces Menu, MenuBar, MenuButton, TieredMenu, SlideMenu Example

The major aim of this tutorial is to cover the main menu components that get used with Primefaces implementation. Typically, a huge amount of applications spread over internet use a different form of menus. This tutorial will cover the following types of menu:

  • Menu: Is a navigation component with submenus and menu items.
  • MenuBar: Is a horizontal navigation component.
  • MenuButton: Is used to display different commands in a popup menu.
  • TieredMenu: Is used to display nested submenus with overlays.
  • SlideMenu: Is used to display nested submenus with sliding animation.

Let’s get started explaining all of these menu types to see all of those featured functionalities that Primefaces provide for this kind of components.

Primefaces Menu – Basic Info

Tag menu
Component Class org.primefaces.component.menu.Menu
Component Type org.primefaces.component.Menu
Component Family org.primefaces.component
Renderer Type org.primefaces.component.MenuRenderer
Renderer Class org.primefaces.component.menu.MenuRenderer

Primefaces Menu – Attributes

Name Default Type Description
id null String Unique identifier of the component.
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean.
widgetVar null String Name of the client side widget.
model null MenuModel A menu model instance to create menu programmatically.
trigger null String Target component to attach the overlay menu.
my null String Corner of menu to align with trigger element.
at null String Corner of trigger to align with menu element.
overlay false Boolean Defines positioning type of menu, either static or overlay.
style null String Inline style of the main container element.
styleClass null String Style class of the main container element.
triggerEvent click String Event to show the dynamic positioned menu.

Primefaces Menu – Getting Started

A menu is composed of submenus and menuitems. Submenus are used to group menuitems, while menuitems correspond to those actions required. Following example shows you the most simplest use of Menu component.

index.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:menu>
		<p:submenu label="File">
			<p:menuitem value="Open"></p:menuitem>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About Primefaces"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menu>
</h:form>
</html>

Primefaces Menu – Overlay Menu

Menu can be positioned in two ways; static or dynamic. Static position means that the menu is in normal page flow. In contrast dynamic menus isn’t in the normal flow of the page allowing them to overlay other elements. For defining menu dynamically, you should pass through below steps:

  • Define your menu normally by setting overlay attribute to true and associating the menu’s trigger attribute with the idof the triggered action.
  • Tune both of my and at menu’s attribute for specifying the corner of the menu to align with trigger element and corner of trigger to align with menu element, respectively.
  • Pairs of left, right, bottom and top are the only values accepted for my and at attributes.

index1.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:menu overlay="true" trigger="triggerButton" my="left top" at="right top">
		<p:submenu label="File">
			<p:menuitem value="Open"></p:menuitem>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About Primefaces"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menu>
	<p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton>
</h:form>
</html>

Menu-Simple-Menu-Example

  • Once Trigger Menu action has activated, your defined menu has been displayed.

Primefaces Menu – Ajax and Non-Ajax Actions

As now, you’ve developed a simple static menu and more complicated dynamic one. Both of these menus are containing menuitems that correspond to required actions that menu aim to provide. Those menuitems are actually actions likewise p:commandButton, so it’s also applicable for you to ajaxify them.

index2.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:growl id="message"></p:growl>
	<p:menu overlay="true" trigger="triggerButton" my="left top" at="right top">
		<p:submenu label="File">
			<p:menuitem value="Open" action="#{menuManagedBean.openAction}" update="message"></p:menuitem>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About Primefaces"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menu>
	<p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton>
</h:form>
</html>

MenuManagedBean.java


package com.journaldev.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
@ManagedBean
@SessionScoped
public class MenuManagedBean {
	public String openAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Open action has activiated asynchrounsly !"));
		return "";
	}
}

Primefaces Menu – Dynamic Menus

Menus can be created programmatically as well, this is more flexible compared to the declarative approach. You can define like that menu by using org.primefaces.model.MenuModel instance. Components like p:submenu, p:menuitem and p:separator have also their default implementation that are used for define programmatic menu. Following example shows you the same business scenario that you’ve developed before, this time the menu will be rendered programmatically.

index3.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:growl id="message"></p:growl>
	<p:menu overlay="true" trigger="triggerButton" my="left top" at="right top" model="#{menuManagedBean.menu}">
	</p:menu>
	<p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton>
</h:form>
</html>

MenuManagedBean.java


package com.journaldev.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSeparator;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;
@ManagedBean
@SessionScoped
public class MenuManagedBean {
	private MenuModel menu = new DefaultMenuModel();
	public MenuManagedBean(){
		// Create submenu
		DefaultSubMenu file = new DefaultSubMenu("File");
		// Create submenu
		DefaultSubMenu help = new DefaultSubMenu("Help");
		// Create menuitem
		DefaultMenuItem open = new DefaultMenuItem("Open");
		// Create menuitem
		DefaultMenuItem edit = new DefaultMenuItem("Edit");
		// Create menuitem
		DefaultMenuItem exit = new DefaultMenuItem("Exit");
		// Create menuitem
		DefaultMenuItem about = new DefaultMenuItem("About Primefaces");
		// Create menuitem
		DefaultMenuItem contact = new DefaultMenuItem("Contact Us");
		// Create menuitem
		DefaultMenuItem helpMenuItem = new DefaultMenuItem("Help");
		// Determine menuitem action
		open.setCommand("#{menuManagedBean.openAction}");
		// Associate menuitem with submenu
		file.addElement(open);
		file.addElement(edit);
		file.addElement(new DefaultSeparator());
		file.addElement(exit);
		help.addElement(about);
		help.addElement(contact);
		help.addElement(new DefaultSeparator());
		help.addElement(helpMenuItem);
		// Associate submenu with menu
		menu.addElement(file);
		menu.addElement(help);
	}
	public MenuModel getMenu() {
		return menu;
	}
	public void setMenu(MenuModel menu) {
		this.menu = menu;
	}
	public String openAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Open action has activiated asynchrounsly !"));
		return "";
	}
}

Menu-Simple-Menu-Example

Primefaces Menubar – Basic Info

Menubar is a horizontal navigation component.

Tag Menubar
Component Class org.primefaces.component.menubar.Menubar
Component Type org.primefaces.component.Menubar
Component Family org.primefaces.component
Renderer Type org.primefaces.component.MenubarRenderer
Renderer Class org.primefaces.component.menubar.MenubarRenderer

Primefaces Menubar – Attributes

Name Default Type Description
id null String Unique identifier of the component.
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean.
widgetVar null String Name of the client side widget
model null MenuModel MenuModel instance to create menus
programmatically
style null String Inline style of menubar
styleClass null String Style class of menubar
autoDisplay false Boolean Defines whether the first level of submenus will be displayed on mouseover or not. When set to false, click event is required to display.

Primefaces Menubar – Getting Started

Similar to Menu component, Menubar requires p:submenu and p:menuitem as a child to compose the menubar.

Primefaces Menubar – Nested Menus

Menubar supports nested menus, that is by providing a submenus within another parent submenus.

index5.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:menubar>
		<p:submenu label="File">
			<p:submenu label="Open">
				<p:menuitem value="Open Excel File"></p:menuitem>
				<p:menuitem value="Open Word File"></p:menuitem>
				<p:menuitem value="Open Power Point File"></p:menuitem>
			</p:submenu>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About JournalDev"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menubar>
</h:form>
</html>

Menubar-Nested-Menubar

Primefaces Menubar – Root Menuitem

Menubar has also supported rooted menuitem, that is by providing a direct p:menuitem child component within p:menubar.

index6.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:menubar>
		<p:menuitem value="Open"></p:menuitem>
	</p:menubar>
</h:form>
</html>

Primefaces Menubar – Ajax and Non-Ajax Actions

Likewise p:commandButton component, p:menuitem has also supported ajaxifying actions. You’ve already experienced this in p:menu section. You can use p:menuitem for doing actions – Ajax and Non-Ajax – and navigation as well.
Following sample shows you the different usage of p:menuitem.

index7.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
<p:growl id="message"></p:growl>
	<p:menubar>
		<p:submenu label="File">
			<p:submenu label="Open">
				<p:menuitem value="Ajax Action" action="#{menubarManagedBean.ajaxAction}" update="message"></p:menuitem>
				<p:menuitem value="Non Ajax Action" action="#{menubarManagedBean.nonAjaxAction}" ajax="false"></p:menuitem>
				<p:menuitem value="Go To JournalDev" url="https://www.journaldev.com"></p:menuitem>
			</p:submenu>
			<p:menuitem value="Edit"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Exit"></p:menuitem>
		</p:submenu>
		<p:submenu label="Help">
			<p:menuitem value="About JournalDev"></p:menuitem>
			<p:menuitem value="Contact Us"></p:menuitem>
			<p:separator/>
			<p:menuitem value="Help"></p:menuitem>
		</p:submenu>
	</p:menubar>
</h:form>
</html>

MenubarManagedBean.java


package com.journaldev.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
@ManagedBean
@SessionScoped
public class MenubarManagedBean {
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}
	public String nonAjaxAction(){
		return "";
	}
}

Primefaces Menubar – Dynamic Menus

Menubar has also supported dynamic creation of it, you can create Menubar programmatically and providing Ajax, Non-Ajax and URL actions likewise you did in the Ajax and Non-Ajax actions section.

index8.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
<p:growl id="message"></p:growl>
	<p:menubar model="#{menubarManagedBean.menubar}">
	</p:menubar>
</h:form>
</html>

MenubarManagedBean.java


package com.journaldev.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSeparator;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;
@ManagedBean
@SessionScoped
public class MenubarManagedBean {
	private MenuModel menubar = new DefaultMenuModel();
	public MenubarManagedBean(){
		// Create submenus required
		DefaultSubMenu file = new DefaultSubMenu("File");
		DefaultSubMenu open = new DefaultSubMenu("Open");
		DefaultSubMenu help = new DefaultSubMenu("Help");
		// Create menuitems required
		DefaultMenuItem edit = new DefaultMenuItem("Edit");
		DefaultMenuItem exit = new DefaultMenuItem("Exit");
		// Create menuitems required
		DefaultMenuItem ajaxAction = new DefaultMenuItem("Ajax Action");
		ajaxAction.setUpdate("message");
		ajaxAction.setCommand("#{menubarManagedBean.ajaxAction}");
		DefaultMenuItem nonAjaxAction = new DefaultMenuItem("Non Ajax Action");
		nonAjaxAction.setAjax(false);
		nonAjaxAction.setCommand("#{menubarManagedBean.nonAjaxAction}");
		DefaultMenuItem urlAction = new DefaultMenuItem("Go To JournalDev");
		urlAction.setUrl("https://www.journaldev.com");
		DefaultMenuItem about = new DefaultMenuItem("About JournalDev");
		DefaultMenuItem contactUs = new DefaultMenuItem("Contact Us");
		DefaultMenuItem helpMenuItem = new DefaultMenuItem("Help");
		// Associate menuitems with open submenu
		open.addElement(ajaxAction);
		open.addElement(nonAjaxAction);
		open.addElement(urlAction);
		// Associate menuitems with help submenu
		help.addElement(about);
		help.addElement(contactUs);
		help.addElement(new DefaultSeparator());
		help.addElement(helpMenuItem);
		// Associate open submenu with file submenu
		file.addElement(open);
		file.addElement(edit);
		file.addElement(new DefaultSeparator());
		file.addElement(exit);
		// Associate submenus with the menubar
		this.menubar.addElement(file);
		this.menubar.addElement(help);
	}
	public MenuModel getMenubar() {
		return menubar;
	}
	public void setMenubar(MenuModel menubar) {
		this.menubar = menubar;
	}
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}
	public String nonAjaxAction(){
		return "";
	}
}

Primefaces MenuButton – Basic Info

MenuButton displays different commands in a popup menu.

Tag menuButton
Component Class org.primefaces.component.menubutton.MenuButton
Component Type org.primefaces.component.MenuButton
Component Family org.primefaces.component
Renderer Type org.primefaces.component.MenuButtonRenderer
Renderer Class org.primefaces.component.menubutton.MenuButtonRenderer

Primefaces MenuButton – Attributes

Name Default Type Description
id null String Unique identifier of the component.
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean.
value null String Label of the button
style null String Style of the main container element
styleClass null String Style class of the main container element
widgetVar null String Name of the client side widget
model null MenuModel MenuModel instance to create menus programmatically
disabled false Boolean Disables or enables the button.
iconPos left String Position of the icon, valid values are left and right.
appendTo null String Appends the overlay to the element defined by search expression. Defaults to document body.

Primefaces MenuButton – Getting Started

MenuButton consists of one or more menuitems. Those menuitems that would be defined have the same similarities as those already used before, Ajax, non-ajax and navigation actions are also supported here.

index9.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:menuButton value="MenuButton">
		<p:menuitem value="Ajax Action" action="#{menuButtonManagedBean.ajaxAction}" update="message"></p:menuitem>
		<p:menuitem value="Non Ajax Action" action="#{menuButtonManagedBean.nonAjaxAction}" ajax="false"></p:menuitem>
		<p:menuitem value="Go To JournalDev" url="https://www.journaldev.com"></p:menuitem>
	</p:menuButton>
</h:form>
</html>

MenuButtonManagedBean.java


package com.journaldev.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSeparator;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;
@ManagedBean(name="menuButtonManagedBean")
@SessionScoped
public class MenuButtonManagedBean {
	private MenuModel menuButton = new DefaultMenuModel();
	public MenuButtonManagedBean(){
	}
	public MenuModel getMenuButton() {
		return menuButton;
	}
	public void setMenuButton(MenuModel menuButton) {
		this.menuButton = menuButton;
	}
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}
	public String nonAjaxAction(){
		return "";
	}
}

Primefaces MenuButton – Dynamic Menus

MenuButton can be created programmatically as well. The same example of MenuButton that is provided in the previous section has actually implemented below using programmatic methodology.

index10.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:menuButton value="MenuButton" model="#{menuButtonManagedBean.menuButton}">
	</p:menuButton>
</h:form>
</html>

MenuButtonManagedBean.java


package com.journaldev.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.MenuModel;
@ManagedBean(name="menuButtonManagedBean")
@SessionScoped
public class MenuButtonManagedBean {
	private MenuModel menuButton = new DefaultMenuModel();
	public MenuButtonManagedBean(){
		// Create menuitems required
		DefaultMenuItem ajaxAction = new DefaultMenuItem("Ajax Action");
		ajaxAction.setUpdate("message");
		ajaxAction.setCommand("#{menubarManagedBean.ajaxAction}");
		DefaultMenuItem nonAjaxAction = new DefaultMenuItem("Non Ajax Action");
		nonAjaxAction.setAjax(false);
		nonAjaxAction.setCommand("#{menubarManagedBean.nonAjaxAction}");
		DefaultMenuItem urlAction = new DefaultMenuItem("Go To JournalDev");
		urlAction.setUrl("https://www.journaldev.com");
		this.menuButton.addElement(ajaxAction);
		this.menuButton.addElement(nonAjaxAction);
		this.menuButton.addElement(urlAction);
	}
	public MenuModel getMenuButton() {
		return menuButton;
	}
	public void setMenuButton(MenuModel menuButton) {
		this.menuButton = menuButton;
	}
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}
	public String nonAjaxAction(){
		return "";
	}
}

Primefaces TieredMenu – Basic Info

TieredMenu is used to display nested submenus with overlays.

Tag TieredMenu
Component Class org.primefaces.component.tieredmenu.TieredMenu
Component Type org.primefaces.component.TieredMenu
Component Family org.primefaces.component
Renderer Type org.primefaces.component.TieredMenuRenderer
Renderer Class org.primefaces.component.tieredmenu.TieredMenuRenderer

Primefaces TieredMenu – Attributes

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
widgetVar null String Name of the client side widget.
model null MenuModel MenuModel instance for programmatic menu.
style null String Inline style of the component.
styleClass null String Style class of the component.
autoDisplay true Boolean Defines whether the first level of submenus will be displayed on mouseover or not. When set to false, click event is required to display.
trigger null String Id of the component whose triggerEvent will show the dynamic positioned menu.
my null String Corner of menu to align with trigger element.
at null String Corner of trigger to align with menu element.
overlay false Boolean Defines positioning, when enabled menu is displayed with absolute position relative to the trigger. Default is false, meaning static positioning.
triggerEvent click String Event name of trigger that will show the dynamic positioned menu.

Primefaces TieredMenu – Getting Started

TieredMenu consists of submenus and menuitems, submenus can be nested and each nested submenu will be displayed in an overlay. Those menuitems that get involved within p:tieredMenu component are targeted for Ajax, non-Ajax and navigation actions like all of these menuitems used previously. Following example shows you the most simplest applicable use for p:tieredMenu that is containing for a set of mixed actions.

index11.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:tieredMenu>
		<p:submenu label="Ajax Menuitem">
			<p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="Non Ajax Menuitem">
			<p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="Navigations">
			<p:submenu label="Primefaces links">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime Blogs">
				<p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:tieredMenu>
</h:form>
</html>

TieredMenuManagedBean.java


package com.journaldev.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
@ManagedBean
@SessionScoped
public class TieredMenuManagedBean {
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}
	public String nonAjaxAction(){
		return "";
	}
}

TieredMenu-Simple-Example-Actions

Primefaces TieredMenu – AutoDisplay

By default, submenus are displayed when mouse is over root menuitems, set autoDisplay to false require a click on root menuitems to enable autoDisplay mode.

The same example will be used to set autoDisplay to false against p:tieredMenu component.

Primefaces TieredMenu - AutoDisplay Set To False

Primefaces TieredMenu – Overlay

Likewise Menu component, TieredMenu can also be overlaid using the same way that is used for overlaying the Menu component (See Menu Overlay).

index11.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:tieredMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top">
		<p:submenu label="Ajax Menuitem">
			<p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="Non Ajax Menuitem">
			<p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="Navigations">
			<p:submenu label="Primefaces links">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime Blogs">
				<p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:tieredMenu>
	<p:commandButton value="Show Menu" id="triggerBtn"></p:commandButton>
</h:form>
</html>

TieredMenu-Simple-Example-Overlay

Primefaces TieredMenu – Client Side API

It’s also applicable for you to control TieredMenu component through using of Primefaces’ Client Side API.

Method Params Return Type Description
show() – void Shows overlay menu.
hide() – void Hides overlay menu.
align() – void Aligns overlay menu with trigger.

index11.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function showMenu(){
			PF('tieredMenu').show();
		}
		function hideMenu(){
			PF('tieredMenu').hide();
		}
	</script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:tieredMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top" widgetVar="tieredMenu">
		<p:submenu label="Ajax Menuitem">
			<p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="Non Ajax Menuitem">
			<p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="Navigations">
			<p:submenu label="Primefaces links">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime Blogs">
				<p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:tieredMenu>
	<p:commandButton value="Show Menu - Normal Trigger" id="triggerBtn"></p:commandButton>
	<p:commandButton value="Show Menu - JavaScript function" onclick="showMenu()"></p:commandButton>
	<p:commandButton value="Hide Menu - JavaScript function" onclick="hideMenu()"></p:commandButton>
</h:form>
</html>

Primefaces SlideMenu – Basic Info

SlideMenu is used to display nested submenus with sliding animation.

Tag slideMenu
Component Class org.primefaces.component.slidemenu.SlideMenu
Component Type org.primefaces.component.SlideMenu
Component Family org.primefaces.component
Renderer Type org.primefaces.component.SlideMenuRenderer
Renderer Class org.primefaces.component.slidemenu.SlideMenuRenderer

Primefaces Slide Menu – Attributes

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
widgetVar null String Name of the client side widget.
model null MenuModel MenuModel instance for programmatic menu.
style null String Inline style of the component.
styleClass null String Style class of the component.
backLabel Back String Text for back link.
trigger null String Id of the component whose triggerEvent will show the dynamic positioned menu.
my null String Corner of menu to align with trigger element.
at null String Corner of trigger to align with menu element.
overlay false Boolean Defines positioning, when enabled menu is displayed with absolute position relative to the trigger. Default is false, meaning static positioning.
triggerEvent click String Event name of trigger that will show the dynamic positioned menu.

Primefaces Slide Menu – Getting Started – Overlay & Client Side API

SlideMenu consists of submenus and menuitems, submenus can be nested and each nested submenus will be displayed with a slide animation. SlideMenu functionlaities are similar to these defined in the TieredMenu that discussed in the previous section.

index12.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function showMenu(){
			PF('tieredMenu').show();
		}
		function hideMenu(){
			PF('tieredMenu').hide();
		}
	</script>
</h:head>
<h:form style="width:400px;">
	<p:growl id="message"></p:growl>
	<p:slideMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left top" at="right top" widgetVar="tieredMenu">
		<p:submenu label="Ajax Menuitem">
			<p:menuitem value="Ajax Action" action="#{slideMenuManagedBean.ajaxAction}" update="message"></p:menuitem>
		</p:submenu>
		<p:submenu label="Non Ajax Menuitem">
			<p:menuitem value="Non Ajax Action" action="#{slideMenuManagedBean.nonAjaxAction}"></p:menuitem>
		</p:submenu>
		<p:separator/>
		<p:submenu label="Navigations">
			<p:submenu label="Primefaces links">
				<p:menuitem value="Prime" url="https://www.prime.com.tr"></p:menuitem>
				<p:menuitem value="Primefaces" url="https://www.primefaces.org"></p:menuitem>
			</p:submenu>
			<p:submenu label="Prime Blogs">
				<p:menuitem value="JournalDev" url="https://www.journaldev.com"></p:menuitem>
			</p:submenu>
		</p:submenu>
	</p:slideMenu>
	<p:commandButton value="Show Menu - Normal Trigger" id="triggerBtn"></p:commandButton>
	<p:commandButton value="Show Menu - JavaScript function" onclick="showMenu()"></p:commandButton>
	<p:commandButton value="Hide Menu - JavaScript function" onclick="hideMenu()"></p:commandButton>
</h:form>
</html>

SlideMenuManagedBean.java


package com.journaldev.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
@ManagedBean
@SessionScoped
public class SlideMenuManagedBean {
	public String ajaxAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax Update"));
		return "";
	}
	public String nonAjaxAction(){
		return "";
	}
}

Summary

Primefaces provides you a vast amount of Primefaces’ UI Menu components, that are set the developer in front of interesting collection that the user may select from. This tutorial intended to clarify part of these menu types. Contribute us by commenting below and find the source code for this tutorial.

By admin

Related Post

Java Programming

[Solved] org.hibernate.HibernateException: get is not valid without active transaction With Examples [Latest]

Oct 24, 2022 admin
Java Programming

Queue Implementation in Java using Array With Examples [Latest]

Oct 24, 2022 admin
Java Programming

Spring ActiveMQ Example (Part 2) [Latest]

Oct 24, 2022 admin

Leave a Reply

You missed

Java Programming

[Solved] org.hibernate.HibernateException: get is not valid without active transaction With Examples [Latest]

Oct 24, 2022 admin
C++ Programming

How to Generate XML from XSD in Eclipse Example [Latest]

Oct 24, 2022 admin
Java Programming

Queue Implementation in Java using Array With Examples [Latest]

Oct 24, 2022 admin
C Programming

Depth First Search (DFS) for a Graph With Examples [Latest]

Oct 24, 2022 admin
%d bloggers like this: