MegaMenu

MegaMenu displays submenus of root items together.

Default MegaMenu



Click Trigger



Source

<h:form>

    <h3>Default MegaMenu</h3>
    <p:megaMenu>
        <p:submenu label="TV" icon="ui-icon-check">
            <p:column>
                <p:submenu label="TV.1">
                    <p:menuitem value="TV.1.1" url="#" />
                    <p:menuitem value="TV.1.2" url="#" />
                </p:submenu>
                <p:submenu label="TV.2">
                    <p:menuitem value="TV.2.1" url="#" />
                    <p:menuitem value="TV.2.2" url="#" />
                    <p:menuitem value="TV.2.3" url="#" />
                </p:submenu>
                <p:submenu label="TV.3">
                    <p:menuitem value="TV.3.1" url="#" />
                    <p:menuitem value="TV.3.2" url="#" />
                </p:submenu>
            </p:column>

            <p:column>
                <p:submenu label="TV.4">
                    <p:menuitem value="TV.4.1" url="#" />
                    <p:menuitem value="TV.4.2" url="#" />
                </p:submenu>
                <p:submenu label="TV.5">
                    <p:menuitem value="TV.5.1" url="#" />
                    <p:menuitem value="TV.5.2" url="#" />
                    <p:menuitem value="TV.5.3" url="#" />
                </p:submenu>
            </p:column>

            <p:column>
                <strong>Sopranos</strong>
                <p:graphicImage value="/images/sopranos/sopranos1.jpg" width="200"/>
            </p:column>
        </p:submenu>

        <p:submenu label="Sports" icon="ui-icon-document">

            <p:column>
                <p:submenu label="Sports.1">
                    <p:menuitem value="Sports.1.1" url="#" />
                    <p:menuitem value="Sports.1.2" url="#" />
                </p:submenu>
                <p:submenu label="Sports.2">
                    <p:menuitem value="Sports.2.1" url="#" />
                    <p:menuitem value="Sports.2.2" url="#" />
                    <p:menuitem value="Sports.2.3" url="#" />
                </p:submenu>
                <p:submenu label="Sports.3">
                    <p:menuitem value="Sports.3.1" url="#" />
                    <p:menuitem value="Sports.3.2" url="#" />
                </p:submenu>
            </p:column>

            <p:column>
                <p:submenu label="Sports.4">
                    <p:menuitem value="Sports.4.1" url="#" />
                    <p:menuitem value="Sports.4.2" url="#" />
                </p:submenu>
                <p:submenu label="Sports.5">
                    <p:menuitem value="Sports.5.1" url="#" />
                    <p:menuitem value="Sports.5.2" url="#" />
                    <p:menuitem value="Sports.5.3" url="#" />
                </p:submenu>
            </p:column>
            <p:column>
                <p:submenu label="Sports.7">
                    <p:menuitem value="Sports.7.1" url="#" />
                    <p:menuitem value="Sports.7.2" url="#" />
                </p:submenu>
                <p:submenu label="Sports.8">
                    <p:menuitem value="Sports.8.1" url="#" />
                    <p:menuitem value="Sports.8.2" url="#" />
                    <p:menuitem value="Sports.8.3" url="#" />
                    <p:menuitem value="Sports.8.4" url="#" />
                    <p:menuitem value="Sports.8.5" url="#" />
                    <p:menuitem value="Sports.8.6" url="#" />
                </p:submenu>
            </p:column>
        </p:submenu>

        <p:submenu label="Entertainment" icon="ui-icon-pencil">
            <p:column>
                <p:submenu label="Entertainment.1">
                    <p:menuitem value="Entertainment.1.1" url="#" />
                    <p:menuitem value="Entertainment.1.2" url="#" />
                </p:submenu>
                <p:submenu label="Entertainment.2">
                    <p:menuitem value="Entertainment.2.1" url="#" />
                    <p:menuitem value="Entertainment.2.2" url="#" />
                    <p:menuitem value="Entertainment.2.3" url="#" />
                </p:submenu>
                <p:submenu label="Entertainment.3">
                    <p:menuitem value="Entertainment.3.1" url="#" />
                    <p:menuitem value="Entertainment.3.2" url="#" />
                </p:submenu>
            </p:column>

            <p:column>
                <p:submenu label="Entertainment.4" icon="ui-icon-help">
                    <p:menuitem value="Entertainment.4.1" url="#" />
                    <p:menuitem value="Entertainment.4.2" url="#" />
                </p:submenu>
                <p:submenu label="Entertainment.5">
                    <p:menuitem value="Entertainment.5.1" url="#" />
                    <p:menuitem value="Entertainment.5.2" url="#" />
                    <p:menuitem value="Entertainment.5.3" url="#" />
                </p:submenu>
                <p:submenu label="Entertainment.6">
                    <p:menuitem value="Entertainment.6.1" url="#" />
                    <p:menuitem value="Entertainment.6.2" url="#" />
                </p:submenu>
            </p:column>
        </p:submenu>


        <p:submenu label="Tech" icon="ui-icon-contact">
            <p:column>
                <p:submenu label="Tech.1">
                    <p:menuitem value="Tech.1.1" url="#" />
                    <p:menuitem value="Tech.1.2" url="#" />
                </p:submenu>
                <p:submenu label="Tech.2">
                    <p:menuitem value="Tech.2.1" url="#" />
                    <p:menuitem value="Tech.2.2" url="#" />
                    <p:menuitem value="Tech.2.3" url="#" />
                </p:submenu>
                <p:submenu label="Tech.3">
                    <p:menuitem value="Tech.3.1" url="#" />
                    <p:menuitem value="Tech.3.2" url="#" />
                </p:submenu>
            </p:column>

            <p:column>
                <p:submenu label="Tech.4">
                    <p:menuitem value="Tech.4.1" url="#" />
                    <p:menuitem value="Tech.4.2" url="#" />
                </p:submenu>
            </p:column>
        </p:submenu>

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

    <br /><br />

    <h3>Click Trigger</h3>
    <p:megaMenu autoDisplay="false">
        //Same as default megamenu
    </p:megaMenu>

</h:form>