PrimeFaces MenuBar

It is a horizontal navigation component which provides menus options. It is used to collect menus and display that in an organize row.

We can create menubar by using <p:menubar> component in JSF application. Some important attributes are tabled below.

MenuBar Attributes

Attribute	Default value	Type	Description
model	null	MenuModel	It is used to create menus programmatically.
style	null	String	It is used for Inline style of menubar.
styleClass	null	String	It is a style class of menubar.
autoDisplay	false	Boolean	It is used to define whether the first level of submenus will be displayed on mouseover or not.
tabindex	0	String	It is used to set position of the element in the tabbing order.
toggleEvent	over	String	Event to toggle the submenus.

Example

Here, in the following example, we are implementing <p:menubar> component. This example contains the following files.

JSF File

// menuBar.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>MenuBar</title>
</h:head>
<h:body>
<h:form>
<p:menubar>
<p:submenu label="File" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Text" />
<p:menuitem value="Other" />
</p:submenu>
<p:menuitem value="Open" />
<p:separator />
<p:menuitem value="Exit" />
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" icon="ui-icon-arrowreturnthick-1-w" />
<p:menuitem value="Redo" icon="ui-icon-arrowreturnthick-1-e" />
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="help" icon="ui-icon-help" />
</p:submenu>
</p:menubar>
</h:form>
</h:body>
</html>

Output: