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

Get PrimeFaces Cookbook - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.