PrimeFaces - MegaMenu Example

[Updated: Jul 7, 2017, Created: Jul 7, 2017]

In this example, we will learn how to build a dropdown MegaMenu programmatically. The main difference between MenuBar and MegaMenu is that: MeuBar arranges sub-menus/items directly to parent menu, whereas, MegaBar arranges items in columns. That means, in MegaMenu, we can group related items together in columns and add all columns to a one single root parent. Let's understand that with an example.

JSF page


    <h2>PrimeFaces MegaMenu Example</h2>
    <p:megaMenu model="#{menuBean.menuModel}">

The manage bean

public class MenuBean {
  private MenuModel model;
  private DefaultSubMenu rootMenu;

  public void init() {
      model = new DefaultMenuModel();
      rootMenu = new DefaultSubMenu("Menu");
      addMenu("File", "New", "Open", "Close", "Exit");
      addMenu("Edit", "Undo", "Redo", "Cut", "Copy");
      addMenu("View", "Summary", "Settings", "Layout");
      addMenu("Help", "Help topics", "Support");

  public void addMenu(String label, String... items) {

      DefaultMenuColumn column = new DefaultMenuColumn();

      //a submenu inside column
      DefaultSubMenu theColumnMenu = new DefaultSubMenu(label);

      for (Object item : items) {
          DefaultMenuItem mi = new DefaultMenuItem(item);
      //the main menu has columns instead of items

  public MenuModel getMenuModel() {
      return model;

To try examples, run embedded tomcat (configured in pom.xml of example project below):

mvn tomcat7:run-war


Example Project

Dependencies and Technologies Used:

  • primefaces 6.1 primefaces
  • jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • JDK 1.8
  • Maven 3.3.9

Dropdown MenuMenu Example Project Select All Download
  • mega-menu-example
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp

Nested Columns in MegaMenu

In above project example, MenuBean2 tries to add nested mega columns but that doesn't work. It looks like adding nested sub menu to columns is not supported for MegaMenu.

See Also