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

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

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

MenuManagedBean.java

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

MenuManagedBean.java

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

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

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

MenubarManagedBean.java

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

MenubarManagedBean.java

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

MenuButtonManagedBean.java

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

MenuButtonManagedBean.java

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

TieredMenuManagedBean.java

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

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

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

SlideMenuManagedBean.java

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

Leave a Reply

%d bloggers like this: