TieredMenu displays submenus in nested overlays.
<h:form> <p:growl id="messages" showDetail="true" /> <p:tieredMenu style="width:200px"> <p:submenu label="Ajax Menuitems" icon="pi pi-refresh"> <p:menuitem value="Save" action="#{menuView.save}" update="messages" icon="pi pi-save" /> <p:menuitem value="Update" action="#{menuView.update}" update="messages" icon="pi pi-refresh" /> </p:submenu> <p:submenu label="Non-Ajax Menuitem" icon="pi pi-clone"> <p:menuitem value="Delete" action="#{menuView.delete}" update="messages" ajax="false" icon="pi pi-times" /> </p:submenu> <p:separator /> <p:submenu label="Navigations" icon="pi pi-home"> <p:submenu label="Prime Links"> <p:menuitem value="Prime" url="http://www.prime.com.tr" title="xxx" /> <p:menuitem value="PrimeFaces" url="http://www.primefaces.org" /> </p:submenu> <p:menuitem value="Mobile" /> </p:submenu> </p:tieredMenu> <p:separator /> <p:commandButton id="dynaButton" value="Show" type="button" icon="pi pi-home" /> <p:tieredMenu overlay="true" trigger="dynaButton" my="left top" at="left bottom" style="width:200px"> <p:submenu label="Ajax Menuitems"> <p:menuitem value="Save" action="#{menuView.save}" update="messages" icon="pi pi-save" /> <p:menuitem value="Update" action="#{menuView.update}" update="messages" icon="pi pi-refresh" /> </p:submenu> <p:submenu label="Non-Ajax Menuitem"> <p:menuitem value="Delete" action="#{menuView.delete}" update="messages" ajax="false" icon="pi pi-times" /> </p:submenu> <p:submenu label="Navigations" icon="pi pi-home"> <p:submenu label="Prime Links"> <p:menuitem value="Prime" url="http://www.prime.com.tr" /> <p:menuitem value="PrimeFaces" url="http://www.primefaces.org" /> </p:submenu> <p:menuitem value="Mobile" /> </p:submenu> </p:tieredMenu> </h:form>
@ManagedBean public class MenuView { private MenuModel model; @PostConstruct public void init() { model = new DefaultMenuModel(); //First submenu DefaultSubMenu firstSubmenu = new DefaultSubMenu("Dynamic Submenu"); DefaultMenuItem item = new DefaultMenuItem("External"); item.setUrl("http://www.primefaces.org"); item.setIcon("pi pi-home"); firstSubmenu.addElement(item); model.addElement(firstSubmenu); //Second submenu DefaultSubMenu secondSubmenu = new DefaultSubMenu("Dynamic Actions"); item = new DefaultMenuItem("Save"); item.setIcon("pi pi-save"); item.setCommand("#{menuView.save}"); item.setUpdate("messages"); secondSubmenu.addElement(item); item = new DefaultMenuItem("Delete"); item.setIcon("pi pi-times"); item.setCommand("#{menuView.delete}"); item.setAjax(false); secondSubmenu.addElement(item); item = new DefaultMenuItem("Redirect"); item.setIcon("pi pi-search"); item.setCommand("#{menuView.redirect}"); secondSubmenu.addElement(item); model.addElement(secondSubmenu); } public MenuModel getModel() { return model; } public void save() { addMessage("Success", "Data saved"); } public void update() { addMessage("Success", "Data updated"); } public void delete() { addMessage("Success", "Data deleted"); } public void addMessage(String summary, String detail) { FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, detail); FacesContext.getCurrentInstance().addMessage(null, message); } }