MegaMenu – the multicolumn menu

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.

How to do it…

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...