Menu Menu is a navigation component with one level of submenus.

Plain Menu

Overlay

Programmatic Menu

Toggleable

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

    <h3 style="margin-top:0">Plain Menu</h3>
    <p:menu>
        <p:submenu label="Ajax">
            <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk" />
            <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w"/>
        </p:submenu>
        <p:submenu label="Non-Ajax">
            <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
        </p:submenu>
        <p:submenu label="Navigations">
            <p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home"/>
            <p:menuitem value="Internal" outcome="/mobile/index" icon="ui-icon-star"/>
        </p:submenu>
    </p:menu>

    <h3>Overlay</h3>
    <p:commandButton id="dynaButton" value="Show" type="button" icon="ui-icon-extlink"/>
    <p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
        <p:submenu label="Ajax">
            <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk"/>
            <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w"/>
        </p:submenu>
        <p:submenu label="Non-Ajax">
            <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
        </p:submenu>
        <p:submenu label="Navigations">
            <p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home"/>
            <p:menuitem value="Internal" outcome="/mobile/index" icon="ui-icon-star"/>
        </p:submenu>
    </p:menu>

    <h3>Programmatic Menu</h3>
    <p:menu model="#{menuView.model}" />

    <h3>Toggleable</h3>
    <p:menu toggleable="true">
        <p:submenu label="Ajax">
            <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-disk" />
            <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w"/>
        </p:submenu>
        <p:submenu label="Non-Ajax">
            <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
        </p:submenu>
        <p:submenu label="Navigations">
            <p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home"/>
            <p:menuitem value="Internal" outcome="/mobile/index" icon="ui-icon-star"/>
        </p:submenu>
    </p:menu>
</h:form>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.1-SNAPSHOT on Mojarra-2.2.8.