MegaMenu displays submenus of root items together.
<div class="card">
<h:form>
<h5>Horizontal</h5>
<p:megaMenu orientation="horizontal" autoDisplay="false">
<f:facet name="start">
<p:graphicImage name="images/primefaces-logo.svg" library="showcase" width="150"/>
</f:facet>
<p:submenu label="Videos" icon="pi pi-fw pi-video">
<p:column>
<p:submenu label="Video 1">
<p:menuitem value="Video 1.1"/>
<p:menuitem value="Video 1.2"/>
</p:submenu>
<p:submenu label="Video 2">
<p:menuitem value="Video 2.1"/>
<p:menuitem value="Video 2.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Video 3">
<p:menuitem value="Video 3.1"/>
<p:menuitem value="Video 3.2"/>
</p:submenu>
<p:submenu label="Video 4">
<p:menuitem value="Video 4.1"/>
<p:menuitem value="Video 4.2"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Users" icon="pi pi-fw pi-users">
<p:column>
<p:submenu label="User 1">
<p:menuitem value="User 1.1"/>
<p:menuitem value="User 1.2"/>
</p:submenu>
<p:submenu label="User 2">
<p:menuitem value="User 2.1"/>
<p:menuitem value="User 2.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="User 3">
<p:menuitem value="User 3.1"/>
<p:menuitem value="User 3.2"/>
</p:submenu>
<p:submenu label="User 4">
<p:menuitem value="User 4.1"/>
<p:menuitem value="User 4.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="User 5">
<p:menuitem value="User 5.1"/>
<p:menuitem value="User 5.2"/>
</p:submenu>
<p:submenu label="User 6">
<p:menuitem value="User 6.1"/>
<p:menuitem value="User 6.2"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Events" icon="pi pi-fw pi-calendar">
<p:column>
<p:submenu label="Event 1">
<p:menuitem value="Event 1.1"/>
<p:menuitem value="Event 1.2"/>
</p:submenu>
<p:submenu label="Event 2">
<p:menuitem value="Event 2.1"/>
<p:menuitem value="Event 2.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Event 3">
<p:menuitem value="Event 3.1"/>
<p:menuitem value="Event 3.2"/>
</p:submenu>
<p:submenu label="Event 4">
<p:menuitem value="Event 4.1"/>
<p:menuitem value="Event 4.2"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Settings" icon="pi pi-fw pi-cog">
<p:column>
<p:submenu label="Setting 1">
<p:menuitem value="Setting 1.1"/>
<p:menuitem value="Setting 1.2"/>
</p:submenu>
<p:submenu label="Setting 2">
<p:menuitem value="Setting 2.1"/>
<p:menuitem value="Setting 2.2"/>
</p:submenu>
<p:submenu label="Setting 3">
<p:menuitem value="Setting 3.1"/>
<p:menuitem value="Setting 3.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Setting 4">
<p:menuitem value="Setting 4.1"/>
<p:menuitem value="Setting 4.2"/>
</p:submenu>
</p:column>
</p:submenu>
<f:facet name="end">
<div class="ui-input-icon-left mr-2">
<i class="pi pi-fw pi-search" />
<p:inputText placeholder="Search"/>
</div>
<p:button value="Logout" icon="pi pi-fw pi-sign-out" styleClass="ui-button-info"/>
</f:facet>
</p:megaMenu>
<h5>Vertical</h5>
<p:megaMenu orientation="vertical" autoDisplay="false">
<f:facet name="start">
<p:graphicImage name="images/primefaces-logo.svg" library="showcase" width="150" />
</f:facet>
<p:submenu label="Videos" icon="pi pi-fw pi-video">
<p:column>
<p:submenu label="Video 1">
<p:menuitem value="Video 1.1"/>
<p:menuitem value="Video 1.2"/>
</p:submenu>
<p:submenu label="Video 2">
<p:menuitem value="Video 2.1"/>
<p:menuitem value="Video 2.2"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Video 3">
<p:menuitem value="Video 3.1"/>
<p:menuitem value="Video 3.2"/>
</p:submenu>
<p:submenu label="Video 4">
<p:menuitem value="Video 4.1"/>
<p:menuitem value="Video 4.2"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Users" icon="pi pi-fw pi-users">
<p:column>
<p:submenu label="User 1">
<p:menuitem value="User 1.1"/>
<p:menuitem value="User 1.2" url="#"/>
</p:submenu>
<p:submenu label="User 2">
<p:menuitem value="User 2.1" url="#"/>
<p:menuitem value="User 2.2" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="User 3">
<p:menuitem value="User 3.1" url="#"/>
<p:menuitem value="User 3.2" url="#"/>
</p:submenu>
<p:submenu label="User 4">
<p:menuitem value="User 4.1" url="#"/>
<p:menuitem value="User 4.2" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="User 5">
<p:menuitem value="User 5.1" url="#"/>
<p:menuitem value="User 5.2" url="#"/>
</p:submenu>
<p:submenu label="User 6">
<p:menuitem value="User 6.1" url="#"/>
<p:menuitem value="User 6.2" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Events" icon="pi pi-fw pi-calendar">
<p:column>
<p:submenu label="Event 1">
<p:menuitem value="Event 1.1" url="#"/>
<p:menuitem value="Event 1.2" url="#"/>
</p:submenu>
<p:submenu label="Event 2">
<p:menuitem value="Event 2.1" url="#"/>
<p:menuitem value="Event 2.2" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Event 3">
<p:menuitem value="Event 3.1" url="#"/>
<p:menuitem value="Event 3.2" url="#"/>
</p:submenu>
<p:submenu label="Event 4">
<p:menuitem value="Event 4.1" url="#"/>
<p:menuitem value="Event 4.2" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Settings" icon="pi pi-fw pi-cog">
<p:column>
<p:submenu label="Setting 1">
<p:menuitem value="Setting 1.1" url="#"/>
<p:menuitem value="Setting 1.2" url="#"/>
</p:submenu>
<p:submenu label="Setting 2">
<p:menuitem value="Setting 2.1" url="#"/>
<p:menuitem value="Setting 2.2" url="#"/>
</p:submenu>
<p:submenu label="Setting 3">
<p:menuitem value="Setting 3.1" url="#"/>
<p:menuitem value="Setting 3.2" url="#"/>
</p:submenu>
</p:column>
<p:column>
<p:submenu label="Setting 4">
<p:menuitem value="Setting 4.1" url="#"/>
<p:menuitem value="Setting 4.2" url="#"/>
</p:submenu>
</p:column>
</p:submenu>
</p:megaMenu>
</h:form>
</div>