Menu - TieredMenu

TieredMenu displays submenus in nested overlays.

tieredMenu.xhtml
MenuView.java

<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>

@Named
@RequestScoped
public class MenuView {

    private MenuModel model;

    @PostConstruct
    public void init() {
        model = new DefaultMenuModel();

        //First submenu
        DefaultSubMenu firstSubmenu = DefaultSubMenu.builder()
                .label("Dynamic Submenu")
                .build();

        DefaultMenuItem item = DefaultMenuItem.builder()
                .value("External")
                .url("http://www.primefaces.org")
                .icon("pi pi-home")
                .build();
        firstSubmenu.getElements().add(item);

        model.getElements().add(firstSubmenu);

        //Second submenu
        DefaultSubMenu secondSubmenu = DefaultSubMenu.builder()
                .label("Dynamic Actions")
                .build();

        item = DefaultMenuItem.builder()
                .value("Save")
                .icon("pi pi-save")
                .command("#{menuView.save}")
                .update("messages")
                .build();
        secondSubmenu.getElements().add(item);

        item = DefaultMenuItem.builder()
                .value("Delete")
                .icon("pi pi-times")
                .command("#{menuView.delete}")
                .ajax(false)
                .build();
        secondSubmenu.getElements().add(item);

        item = DefaultMenuItem.builder()
                .value("Redirect")
                .icon("pi pi-search")
                .command("#{menuView.redirect}")
                .build();
        secondSubmenu.getElements().add(item);

        model.getElements().add(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);
    }
}

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

Nova-Light

Nova-Dark

Nova-Colored

Luna-Blue

Luna-Amber

Luna-Green

Luna-Pink

Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.