Time for action – creating MegaMenu with multiple columns

Let us see how to create a multicolumn menu using the MegaMenu component, by performing the following step:

1. Create the MegaMenu component with multiple columns using <p:column> to group the menu options into a column:

   <p:megaMenu>
       <p:submenu label="Users">
           <p:column>
               <p:submenu label="Normal Users">
                   <p:menuitem value="View Users" url="#"/>
                   <p:menuitem value="User Activity" url="#"/>
               </p:submenu>
               <p:submenu label="Inactive Users">
                   <p:menuitem value="View Inactive Users" url="#"/>
                   <p:menuitem value="Unlock Users" url="#"/>
               </p:submenu>
           </p:column>
           <p:column>
               <p:submenu label="Moderators">
                   <p:menuitem value="View Moderators" url="#"/>
                   <p:menuitem value="Deleted...