Menubar

Menubar brings the desktop application menubars to JSF. Using menuitems, it is very easy to execute ajax, non-ajax and navigations.

Default Menubar



Click Trigger



Source

<h:form>

    <p:growl id="messages"/>

    <h3>Default Menubar</h3>
    <p:menubar>
        <p:submenu label="File" icon="ui-icon-document">
            <p:submenu label="New" icon="ui-icon-contact">
                <p:menuitem value="Project" url="#" />
                <p:menuitem value="Other" url="#" />
            </p:submenu>
            <p:menuitem value="Open" url="#" />
            <p:separator />
            <p:menuitem value="Quit" url="#" />
        </p:submenu>

        <p:submenu label="Edit" icon="ui-icon-pencil">
            <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" />
            <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" />
        </p:submenu>

        <p:submenu label="Help" icon="ui-icon-help">
            <p:menuitem value="Contents" url="#" />
            <p:submenu label="Search" icon="ui-icon-search">
                <p:submenu label="Text">
                    <p:menuitem value="Workspace" url="#" />
                </p:submenu>
                <p:menuitem value="File" url="#" />
            </p:submenu>
        </p:submenu>

        <p:submenu label="Actions" icon="ui-icon-gear">
            <p:submenu label="Ajax" icon="ui-icon-refresh">
                <p:menuitem value="Save" actionListener="#{menuBean.save}" icon="ui-icon-disk" update="messages"/>
                <p:menuitem value="Update" actionListener="#{menuBean.update}" icon="ui-icon-arrowrefresh-1-w" update="messages"/>
            </p:submenu>
            <p:submenu label="Non-Ajax" icon="ui-icon-newwin">
                <p:menuitem value="Delete" actionListener="#{menuBean.delete}" icon="ui-icon-close" update="messages" ajax="false"/>
            </p:submenu>
        </p:submenu>

        <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" />

        <f:facet name="options">
            <p:inputText style="margin-right:10px"/>
            <p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
        </f:facet>
    </p:menubar>

    <h3>Click Trigger</h3>
    <p:menubar autoDisplay="false">
        //same content as default menubar
    </p:menubar>

</h:form>