TieredMenu

TieredMenu displays submenus in nested overlays.

Default TieredMenu

Click Trigger

Overlay

Source

<h:form>
			
    <p:growl id="messages"/>

    <h3>Default TieredMenu</h3>
    <p:tieredMenu style="width:180px">
        <p:submenu label="Ajax Menuitems" icon="ui-icon-refresh">
            <p:menuitem value="Save" actionListener="#{menuBean.save}" update="messages" icon="ui-icon-disk" />
            <p:menuitem value="Update" actionListener="#{menuBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w" />
        </p:submenu>
        <p:submenu label="Non-Ajax Menuitem" icon="ui-icon-newwin">
            <p:menuitem value="Delete" actionListener="#{menuBean.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
        </p:submenu>
        <p:separator />
        <p:submenu label="Navigations" icon="ui-icon-extlink">
            <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" outcome="/mobile/index" />
        </p:submenu>
    </p:tieredMenu>

    <h3>Click Trigger</h3>
    <p:tieredMenu style="width:180px" autoDisplay="false">
        <p:submenu label="Ajax Menuitems" icon="ui-icon-refresh">
            <p:menuitem value="Save" actionListener="#{menuBean.save}" update="messages" icon="ui-icon-disk" />
            <p:menuitem value="Update" actionListener="#{menuBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w" />
        </p:submenu>
        <p:submenu label="Non-Ajax Menuitem" icon="ui-icon-newwin">
            <p:menuitem value="Delete" actionListener="#{menuBean.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
        </p:submenu>
        <p:separator />
        <p:submenu label="Navigations" icon="ui-icon-extlink">
            <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" outcome="/mobile/index" />
        </p:submenu>
    </p:tieredMenu>

    <h3>Overlay</h3>
    <p:commandButton id="dynaButton" value="Show" type="button"/>
    <p:tieredMenu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
        <p:submenu label="Ajax Menuitems">
            <p:menuitem value="Save" actionListener="#{menuBean.save}" update="messages" icon="ui-icon-disk"/>
            <p:menuitem value="Update" actionListener="#{menuBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w"/>
        </p:submenu>
        <p:submenu label="Non-Ajax Menuitem">
            <p:menuitem value="Delete" actionListener="#{buttonBean.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
        </p:submenu>
        <p:submenu label="Navigations" icon="ui-icon-extlink">
            <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" outcome="/mobile/index" />
        </p:submenu>
    </p:tieredMenu>

</h:form>