MenuButton groups multiple items in a popup.
<div class="card">
<h:form>
<p:growl id="messages" showDetail="true"/>
<h5 class="mt-0">Basic</h5>
<p:menuButton value="Options">
<p:menuitem value="Save (Non-Ajax)" action="#{menuView.save}" ajax="false" update="messages" icon="pi pi-save"/>
<p:menuitem value="Update" action="#{menuView.update}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{menuView.delete}" update="messages" icon="pi pi-times"/>
<p:divider/>
<p:menuitem value="Website" url="http://www.primefaces.org" icon="pi pi-external-link"/>
</p:menuButton>
<h5>Button style</h5>
<p:menuButton value="Options" buttonStyleClass="p-button-outlined" buttonStyle="border-radius: 0 1rem">
<p:menuitem value="Save (Non-Ajax)" action="#{menuView.save}" ajax="false" update="messages" icon="pi pi-save"/>
<p:menuitem value="Update" action="#{menuView.update}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{menuView.delete}" update="messages" icon="pi pi-times"/>
<p:divider/>
<p:menuitem value="Website" url="http://www.primefaces.org" icon="pi pi-external-link"/>
</p:menuButton>
<h5>Ajax Disabling and Status Icon</h5>
<p:menuButton value="Options">
<p:menuitem value="Save" action="#{menuView.sleepAndSave}" update="messages" icon="pi pi-save"/>
<p:menuitem value="Update" action="#{menuView.sleepAndUpdate}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{menuView.sleepAndDelete}" update="messages" icon="pi pi-times"/>
</p:menuButton>
<h5>Button Icon</h5>
<p:menuButton buttonIcon="pi pi-save" title="Options">
<p:menuitem value="Save (Non-Ajax)" action="#{menuView.save}" ajax="false" update="messages" icon="pi pi-save"/>
<p:menuitem value="Update" action="#{menuView.update}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{menuView.delete}" update="messages" icon="pi pi-times"/>
<p:divider/>
<p:menuitem value="Website" url="http://www.primefaces.org" icon="pi pi-external-link"/>
</p:menuButton>
<h5>Sizes</h5>
<p:menuButton value="Small" size="small" style="margin-right: 1em;">
<p:menuitem value="Save" action="#{menuView.sleepAndSave}" update="messages" icon="pi pi-save"/>
<p:menuitem value="Update" action="#{menuView.sleepAndUpdate}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{menuView.sleepAndDelete}" update="messages" icon="pi pi-times"/>
</p:menuButton>
<p:menuButton value="Normal" style="margin-right: 1em;">
<p:menuitem value="Save" action="#{menuView.sleepAndSave}" update="messages" icon="pi pi-save"/>
<p:menuitem value="Update" action="#{menuView.sleepAndUpdate}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{menuView.sleepAndDelete}" update="messages" icon="pi pi-times"/>
</p:menuButton>
<p:menuButton value="Large" size="large">
<p:menuitem value="Save" action="#{menuView.sleepAndSave}" update="messages" icon="pi pi-save"/>
<p:menuitem value="Update" action="#{menuView.sleepAndUpdate}" update="messages" icon="pi pi-refresh"/>
<p:menuitem value="Delete" action="#{menuView.sleepAndDelete}" update="messages" icon="pi pi-times"/>
</p:menuButton>
</h:form>
</div>