Menu Bar

Few Copies Left: Java 8 Lambda Expressions PDF eBook Free
TUTORIALS
#INTERVIEW QUESTIONS
JAVA
WEB DESIGN
Download Now
FREE JAVA EBOOKS
Primefaces Menu, MenuBar, MenuButton, TieredMenu &

SlideMenu Components Example Tutorial
Mohammad Amr
open in browser PRO version
July 30, 2014
JSF, PrimeFaces
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
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.
Lets get started explaining all of these menu types to see all of those featured functionalities that Primefaces
provide for this kind of components.
Menu Basic Info

Tag
menu
Component Class
org.primefaces.component.menu.Menu
pdfcrowd.com
Component Type
org.primefaces.component.Menu
Component Family
org.primefaces.component
Renderer Type
org.primefaces.component.MenuRenderer
Renderer Class
org.primefaces.component.menu.MenuRenderer
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.
pdfcrowd.com
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.
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.
pdfcrowd.com
index.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>
<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>
pdfcrowd.com
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 isnt 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 menus trigger
pdfcrowd.com
attribute with the id of the triggered action.

Tune both of my and at menus 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<h:head>
</h:head>
<h:form>
<p:menu overlay="true" trigger="triggerButton" my="left top" at="right top"
<p:separator/>
</p:submenu>
<p:separator/>
</p:submenu>
</p:menu>
<p:commandButton id="triggerButton" value="Trigger Menu"></p:commandButton
</h:form>
pdfcrowd.com
25
26
</h:form>
</html>
Once Trigger Menu action has activated, your defined menu has been displayed.
Menu Ajax and Non-Ajax Actions

As now, youve developed a simple static menu and more complicated dynamic one. Both of these menus are
pdfcrowd.com
containing menuitems that correspond to required actions that menu aim to provide. Those menuitems are
actually actions likewise p:commandButton, so its also applicable for you to ajaxify them.
index2.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<h:head>
</h:head>
<h:form>
<p:growl id="message"></p:growl>
<p:menuitem value="Open" action="#{menuManagedBean.openAction}" update
<p:separator/>
</p:submenu>
<p:separator/>
</p:submenu>
</p:menu>
</h:form>
</html>
pdfcrowd.com
MenuManagedBean.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.journaldev.prime.faces.beans;
import
import
import
import
javax.faces.application.FacesMessage;
javax.faces.bean.ManagedBean;
javax.faces.bean.SessionScoped;
javax.faces.context.FacesContext;
@ManagedBean
@SessionScoped
public class MenuManagedBean {
public String openAction(){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Open a
return "";
}
}
pdfcrowd.com
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 youve developed
before, this time the menu will be rendered programmatically.
index3.xhtml
1
2
3
4
5
6
7
<h:head>
pdfcrowd.com
7
8
9
10
11
12
13
14
15

</h:head>
<h:form>
</p:menu>
</h:form>
</html>
MenuManagedBean.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import
import
import
import
import
import
import
import
import
org.primefaces.model.menu.DefaultMenuItem;
org.primefaces.model.menu.DefaultMenuModel;
org.primefaces.model.menu.DefaultSeparator;
org.primefaces.model.menu.DefaultSubMenu;
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
pdfcrowd.com
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// 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;
}
pdfcrowd.com
59
60
61
62
63
64
65
66
67
68
69
}
public void setMenu(MenuModel menu) {
this.menu = menu;
}
public String openAction(){

FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Open a
return "";
}
pdfcrowd.com
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
Renderer Type
org.primefaces.component.MenubarRenderer
Renderer Class
org.primefaces.component.menubar.MenubarRenderer
Menubar Attributes
Name
Default
Type
Description
id
null
String
pdfcrowd.com
rendered
true
Boolean
binding
null
Object

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.
Menubar Getting Started

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

Menubar supports nested menus, that is by providing a submenus within another parent submenus.
index5.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h:head>
</h:head>
<h:form style="width:400px;">
<p:menubar>
<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>
pdfcrowd.com
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<p:menuitem value="Open Power Point File"></p:menuitem>

</p:submenu>
<p:separator/>
</p:submenu>
<p:menuitem value="About JournalDev"></p:menuitem>
<p:separator/>
</p:submenu>
</p:menubar>
</h:form>
</html>
Menubar Root Menuitem

pdfcrowd.com
Menubar has also supported rooted menuitem, that is by providing a direct p:menuitem child component
within p:menubar.
index6.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h:head>
</h:head>
<p:menubar>
</p:menubar>
</h:form>
</html>
Menubar Ajax and Non-Ajax Actions

pdfcrowd.com
Likewise p:commandButton component, p:menuitem has also supported ajaxifying actions. Youve 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<h:head>
</h:head>
<p:menubar>
<p:submenu label="Open">
<p:menuitem value="Ajax Action" action="#{menubarManagedBean.ajaxAc
<p:menuitem value="Non Ajax Action" action="#{menubarManagedBean.no
<p:menuitem value="Go To JournalDev" url="http://www.journaldev.com
</p:submenu>
<p:separator/>
</p:submenu>
<p:menuitem value="About JournalDev"></p:menuitem>
<p:separator/>
pdfcrowd.com
26
27
28
29
30
</p:submenu>
</p:menubar>
</h:form>
</html>
MenubarManagedBean.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import
import
import
import
@ManagedBean
@SessionScoped
public class MenubarManagedBean {
public String ajaxAction(){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Ajax U
return "";
}
public String nonAjaxAction(){

return "";
}
pdfcrowd.com
pdfcrowd.com
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
1
2
3
4
5
6
7
8
9
10
11
<h:head>
</h:head>
<p:menubar model="#{menubarManagedBean.menubar}">
pdfcrowd.com
11
12
13
14
<p:menubar model="#{menubarManagedBean.menubar}">
</p:menubar>
</h:form>
</html>
MenubarManagedBean.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import
import
import
import
import
import
import
import
import
@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");
pdfcrowd.com
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

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("http://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);
pdfcrowd.com
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
this.menubar.addElement(file);
this.menubar.addElement(help);
}
public MenuModel getMenubar() {
return menubar;
}
public void setMenubar(MenuModel menubar) {
this.menubar = menubar;
}

return "";
}

return "";
}
pdfcrowd.com
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
Renderer Type
org.primefaces.component.MenuButtonRenderer
Renderer Class
org.primefaces.component.menubutton.MenuButtonRenderer
MenuButton Attributes
Name
Default
Type
Description
pdfcrowd.com
id
null
String
rendered
true
Boolean
binding
null
Object

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.
pdfcrowd.com
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h:head>
</h:head>
<p:menuButton value="MenuButton">
<p:menuitem value="Ajax Action" action="#{menuButtonManagedBean.ajaxAction}
<p:menuitem value="Non Ajax Action" action="#{menuButtonManagedBean.nonAjax
<p:menuitem value="Go To JournalDev" url="http://www.journaldev.com"></
</p:menuButton>
</h:form>
</html>
pdfcrowd.com
MenuButtonManagedBean.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import
import
import
import
import
import
import
import
import
@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;
}

pdfcrowd.com
32
33
34
35
36
37
38
39

return "";

return "";
}
MenuButton Dynamic Menus

pdfcrowd.com
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h:head>
</h:head>
<p:menuButton value="MenuButton" model="#{menuButtonManagedBean.menuButton}"
</p:menuButton>
</h:form>
</html>
MenuButtonManagedBean.java
1
2
3
4
5
6
7
8
9
10
11
12
import
import
import
import
import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.MenuModel;
pdfcrowd.com
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@SessionScoped
public class MenuButtonManagedBean {
private MenuModel menuButton = new DefaultMenuModel();
public MenuButtonManagedBean(){
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("http://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;
}

return "";
pdfcrowd.com
47
48
49
50
51
52
53
return "";

return "";
}
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
Renderer Type
org.primefaces.component.TieredMenuRenderer
Renderer Class
org.primefaces.component.tieredmenu.TieredMenuRenderer
TieredMenu Attributes
pdfcrowd.com
Name
Default
Type
Description
id
null
String
Unique identifier of the component
rendered
true
Boolean
binding
null
Object

bean
widgetVar
null
String
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
pdfcrowd.com
at
null
String
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.
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
1
2
3
4
5
6
7
8
9
10
<h:head>
</h:head>
pdfcrowd.com
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<p:tieredMenu>
<p:submenu label="Ajax Menuitem">
<p:menuitem value="Ajax Action" action="#{tieredMenuManagedBean.ajaxAct
</p:submenu>
<p:submenu label="Non Ajax Menuitem">
<p:menuitem value="Non Ajax Action" action="#{tieredMenuManagedBean.non
</p:submenu>
<p:separator/>
<p:submenu label="Navigations">
<p:submenu label="Primefaces links">
<p:menuitem value="Prime" url="http://www.prime.com.tr"></p:menuite
<p:menuitem value="Primefaces" url="http://www.primefaces.org"
</p:submenu>
<p:submenu label="Prime Blogs">
<p:menuitem value="JournalDev" url="http://www.journaldev.com"
</p:submenu>
</p:submenu>
</p:tieredMenu>
</h:form>
</html>
TieredMenuManagedBean.java
1
2
3
4
5
6
7
8
9
10
11
12
import
import
import
import
@ManagedBean
@SessionScoped
public class TieredMenuManagedBean {
pdfcrowd.com
12
13
14
15
16
17
18
19

return "";

return "";
}
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.
pdfcrowd.com
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
1
2
3
4
pdfcrowd.com
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<h:head>
</h:head>
<p:tieredMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left
</p:submenu>
</p:submenu>
<p:separator/>
</p:submenu>
</p:submenu>
</p:submenu>
</p:tieredMenu>
<p:commandButton value="Show Menu" id="triggerBtn"></p:commandButton>
</h:form>
</html>
pdfcrowd.com
TieredMenu Client Side API

Its 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
1
2
3
4
5
6
7
8
9
<h:head>
<script>
function showMenu(){
pdfcrowd.com
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
PF('tieredMenu').show();
}
function hideMenu(){
PF('tieredMenu').hide();
}
</script>
</h:head>
<p:tieredMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left
</p:submenu>
</p:submenu>
<p:separator/>
</p:submenu>
</p:submenu>
</p:submenu>
</p:tieredMenu>
<p:commandButton value="Show Menu - Normal Trigger" id="triggerBtn"></p:command
<p:commandButton value="Show Menu - JavaScript function" onclick="showMenu()"
<p:commandButton value="Hide Menu - JavaScript function" onclick="hideMenu()"
</h:form>
</html>
pdfcrowd.com
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
Renderer Type
org.primefaces.component.SlideMenuRenderer
Renderer Class
org.primefaces.component.slidemenu.SlideMenuRenderer
pdfcrowd.com
Slide Menu Attributes

Name
Default
Type
Description
id
null
String
Unique identifier of the component
rendered
true
Boolean
binding
null
Object

bean
widgetVar
null
String
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.
pdfcrowd.com
my
null
String
at
null
String
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.
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
1
2
3
4
5
6
7
8
9
<h:head>
<script>
pdfcrowd.com
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
1
2
PF('tieredMenu').show();
}
function hideMenu(){
PF('tieredMenu').hide();
}
</script>
</h:head>
<p:slideMenu autoDisplay="false" trigger="triggerBtn" overlay="true" my="left t
<p:menuitem value="Ajax Action" action="#{slideMenuManagedBean.ajaxActi
</p:submenu>
<p:menuitem value="Non Ajax Action" action="#{slideMenuManagedBean.nonA
</p:submenu>
<p:separator/>
</p:submenu>
</p:submenu>
</p:submenu>
</p:slideMenu>
<p:commandButton value="Show Menu - Normal Trigger" id="triggerBtn"></p:command
<p:commandButton value="Show Menu - JavaScript function" onclick="showMenu()"
<p:commandButton value="Hide Menu - JavaScript function" onclick="hideMenu()"
</h:form>
</html>
pdfcrowd.com
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import
import
import
import
@ManagedBean
@SessionScoped
public class SlideMenuManagedBean {
return "";
}

return "";
}
pdfcrowd.com
pdfcrowd.com
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.
Download PrimeFaces Menu Project

215 downloads
Related Posts:
Primefaces Panel,
Primefaces Toolbar,
Primefaces Tab,
PanelGrid &
ToolbarGroup &
TabMenu, TabView &
PrimeFaces Tutorial
PanelMenu Example
Tooltip
TagCloud
with Example
Tutorial
Components
components
Projects
primefaces
Primefaces components
primefaces menu
primefaces menu button
primefaces menubar
pdfcrowd.com
primefaces slide menu
primefaces tiered menu
Written by Mohammad Amr

Mohammad Amr, is a Senior System Developer working now on IHorizons within a
Telecommunication field. He's worked on a different scaled project as he's also an Author
@JournalDev site.
6 Responses to "Primefaces Menu, MenuBar, MenuButton, TieredMenu &

SlideMenu Components Example Tutorial"
Baboutini says:
November 25, 2014 at 3:45 am
how to integrate i18n with the menu programmatically ?

Reply
pdfcrowd.com
Baboutini says:
Hi,
Went i take your source code for programmatic menubar.
Mozilla dont display the submenu propertly.
How to solve it ?
Reply
Baboutini says:
Hi
I solved my problem display submenus with Mozilla by setting the width of my webpage
to 100% (style =100%)
Reply
pdfcrowd.com
Bijetri says:
October 11, 2014 at 2:43 am
The pop up menus or trigger menus or sliding menus are not working. It could be because
the jquery.js file is messing. Please provide it. It will be really help ful
Reply
Bijetri says:
Please include the jquery.js in the download or provide a link for it to download. Thanks.
Reply
Pankaj says:
Go to jQuery official website and download it, or link to it. Is it so hard?
pdfcrowd.com
Reply
Leave a Reply
Your email address will not be published. Required fields are marked *
Name
Email
Website
Comment
pdfcrowd.com
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b>
<blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Post Comment
Sign me up for the JournalDev newsletter!
Be My Friend
JournalDev
Like
12,343 people like JournalDev.
Facebook social plugin
pdfcrowd.com
Pankaj Kumar
Follow
4,342 followers
JournalDev
Follow
+1
+ 8,933
What do you like to see in

upcoming Giveaway?
Sublime Text Editor License (70
USD)
Recent Posts
AngularJS Custom Directives Tutorial
Part 1
JSF Form Components Example
Amazon Kindle Paperwhite (99

USD)
Tutorial
Oracle Webcenter Portal Framework
Amazon/Similar Gift Card (70 USD)

Vote
Hierarchy
JSF UI Component Tag Attributes
View Results
Application Features Pages & Page
Example Tutorial
pdfcrowd.com
JSF Page Lifecycle Management

JSF Beans Example Tutorial
Configuring and Injecting Managed
Beans
AngularJS Services Example Tutorial
JSF Page Navigation Example Tutorial
JSF Error Messages Example Tutorial
Installing Oracle WebCenter Content
11.1.1.8.0 & Integrating It With
Oracle WebCenter Portal 11.1.1.8.0
WordPress Custom Post Types: What
Adve rtise He re
Is It and How It Can Be Created?

JSF Resource Bundle, Custom
Categories
Messages Example Tutorial
AngularJS
CSS3 Zoom Animation Effect on
Database
hover using transform and transform
MongoDB
AngularJS Routing and Multiple Views
Tutorial Example
Hibernate
MongoDB Tutorial installation,
Interview Questions
pdfcrowd.com
example projects, integration with

Servlet, Spring, JSF
Java
Design Patterns
Java EE
jQuery
jQuery Plugins
JSF
Maven
PHP
Portal and Portlets
PrimeFaces
Random
Resources
HTML
Scripts
Softwares
pdfcrowd.com
Spring
Struts 2
Web Design
Wordpress
Pages
About
Advertise
Java Interview Questions
Privacy Policy
Tutorials
Write For Us
Popular Tags
hibernate
hibernate example
Tutorials
Interview Questions
Java Tutorials: Java IO Tutorial, Java
Java String Interview Questions, Java
Regular Expressions Tutorial, Java
Multi-Threading Interview
Multi-Threading Tutorial, Java
Questions, Java Programming
pdfcrowd.com
hibernate tutorial
java Arrays
java design patterns
java file
java interview questions

java io
java String
java Thread
jQuery
java xml
mongodb
primefaces
Multi-Threading Tutorial, Java
Questions, Java Programming
Logging API Tutorial, Java
Interview Questions, Java Interview
Annotations Tutorial,Java XML
Questions, Java Collections
Tutorial, Java Collections Tutorial,
Interview Questions, Java Exception
Java Generics Tutorial, Java
Interview Questions
Exception Handling, Java Reflection

Tutorial, Java Design Patterns, JDBC
Servlet Interview Questions, JSP
Tutorial
Interview Questions, Struts2
Java EE: Servlet JSP Tutorial, Struts2
Interview Questions, JDBC Interview
Tutorial, Spring Tutorial, Hibernate
Questions, Spring Interview
Tutorial, Primefaces Tutorial
Questions, Hibernate Interview
Web Services: Apache Axis 2
Questions
Tutorial, Jersey Restful Web Services

Tutorial
primefaces tutorial
spring tutorial
struts 2 tutorial
struts 2
Misc: Memcached Tutorial

Resources: Free eBooks, My
Favorite Web Hosting
Be My Friend
Facebook
Google+
Twitter
2015 JournalDev Privacy Policy Don't copy, it's Bad
Powered by WordPress
Karma.
pdfcrowd.com

Menu Bar

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Menu Bar

Uploaded by

Copyright:

Available Formats

Few Copies Left: Java 8 Lambda Expressions PDF eBook Free

FREE JAVA EBOOKS

Primefaces Menu, MenuBar, MenuButton, TieredMenu &

open in browser PRO version

July 30, 2014

Are you a developer? Try out the HTML to PDF API

Menu Basic Info

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

Unique identifier of the component.

An el expression that maps to a server side UIComponent instance in a backing

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

Name of the client side widget.

A menu model instance to create menu programmatically.

Target component to attach the overlay menu.

Corner of menu to align with trigger element.

Corner of trigger to align with menu element.

Defines positioning type of menu, either static or overlay.

Inline style of the main container element.

Style class of the main container element.

Event to show the dynamic positioned menu.

Menu Getting Started

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

Menu Overlay Menu

Are you a developer? Try out the HTML to PDF API

attribute with the id of the triggered action.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

Menu Ajax and Non-Ajax Actions

Are you a developer? Try out the HTML to PDF API

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

Menu Dynamic Menus

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

<script name="jquery/jquery.js" library="primefaces"></script>

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

// Associate submenu with menu

public MenuModel getMenu() {

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

public String openAction(){

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

Menubar Basic Info

Unique identifier of the component.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

An el expression that maps to a server side UIComponent instance in a backing

Name of the client side widget

MenuModel instance to create menus

Inline style of menubar

Style class of menubar

Defines whether the first level of submenus will be displayed on mouseover or

Menubar Getting Started

Are you a developer? Try out the HTML to PDF API

open in browser PRO version