A mega menu, sometimes also called a mega drop-down menu, is designed to enhance the scannability and categorization of its contents. PrimeFaces' mega menu is a horizontal navigation component that displays menu items grouped in submenus. The main advantage of such a kind of menu is that everything is visible at once—no scrolling is required.
In this recipe, we will design and implement a mega menu for an imaginary online shop selling clothes.
The layout of the megaMenu component is grid-based. That means root items require columns as children to define each section in a grid. Root items are direct submenus under p:megaMenu.
We will design four root items. The first one will show women's clothing, the second one will show men's clothing, the third one will show a color guide (pictures with available clothing colors), and the last one will show the shopping cart in a dialog. The following code shows this:
<p:megaMenu>
<p:submenu label="Women's Clothing" icon="ui-icon-person">
<p:column>
<p:submenu label="Shoes">
<p:menuitem value="Size UK 3-5" url="#"/>
...
</p:submenu>
<p:submenu label="Jeans">
<p:menuitem value="Curve" url="#"/>
...
</p:submenu>
<p:submenu label="Nightwear">
<p:menuitem value="Calvin Klein" url="#"/>
...
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Leggings">
<p:menuitem value="Long Sleeve" url="#"/>
...
</p:submenu>
<p:submenu label="Skirts">
<p:menuitem value="American Apparel" url="#"/>
...
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Men's Clothing" icon="ui-icon-person">
<p:column>
<p:submenu label="Shoes">
<p:menuitem value="Size UK 3-5" url="#"/>
...
</p:submenu>
<p:submenu label="T-Shirts">
<p:menuitem value="Addict" url="#"/>
...
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Leather Jackets">
<p:menuitem value="Diesel" url="#"/>
...
</p:submenu>
<p:submenu label="Jeans">
<p:menuitem value="Curve" url="#"/>
...
</p:submenu>
<p:submenu label="Swimwear">
<p:menuitem value="Boss Black" url="#"/>
...
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Color Guide" icon="ui-icon-image">
<p:column>
<h:graphicImage library="images" name="colors.gif"/>
</p:column>
</p:submenu>
<p:menuitem value="Shopping Cart"
onclick="PF('wdgtShoppingCart').show();"
update="shoppingCartGrp" icon="ui-icon-cart"/>
</p:megaMenu>
<p:dialog id="shoppingCart" header="Shopping Cart"
widgetVar="wdgtShoppingCart">
<h:panelGroup id="shoppingCartGrp" layout="block"
style="padding:20px;">
<h:outputText value="#{megaMenuBean.items}"/>
</h:panelGroup>
<p:commandButton value="Close" type="button"
onclick="PF('wdgtShoppingCart').hide();"/>
</p:dialog>The following screenshot shows the designed mega menu:
Direct submenus of p:megaMenu require p:column to be represented in a multicolumn grid. Not only submenus, but also any content can be placed inside columns. In the preceding example, we can see <h:graphicImage library="images" name="colors.gif"/> under p:column.
Except for p:column, the structure of p:megaMenu is the same for every PrimeFaces' menu component—it consists of submenus and menu items. A menu item as a root item is supported as well. In the designed example, it is the Shopping Cart menu item:
MegaMenu has the autodisplay feature. This feature defines whether submenus will be displayed on a mouseover event or not. If autoDisplay is set to true (default), the content of the submenu is displayed when the mouse is over it. A menu with the autoDisplay="false" setting requires a click on a submenu to display its menu items.
MegaMenu is horizontal by default. If you want a vertically oriented menu for root menu items, change its orientation as <p:megaMenu orientation="vertical">. The next screenshot shows a vertical mega menu:
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter6/megaMenu.jsf.