CODEWITHSUNDEEP
jsfprimefaces
Padmaja
Padmaja

Reputation: 119

How to add submenu to menuButton in PrimeFaces?

Following is the code:

<p:menuButton styleClass="menuItems" value="File">
        <p:menuitem styleClass="menuItems" value="View" url=""/>
        <p:menuitem styleClass="menuItems" value="Edit" url=""/>
</p:menubutton>

When I add <p:submenu> to <p:menuButton>, UI is not rendering correctly. Want to add <p:submenu> inside <p:menuButton>.

Upvotes: 1

Views: 807

Answers (1)

Jasper de Vries
Jasper de Vries

Reputation: 20253

That's not supported with p:menuButton. You might want to try p:tieredMenu in combination with the overlay="true" attribute:

<p:commandButton id="dynaButton" value="Show" type="button" icon="pi pi-external-link"/>
<p:tieredMenu overlay="true" trigger="dynaButton" my="left top" at="left bottom" style="width:200px">
    <p:submenu label="File" icon="pi pi-fw pi-file">
        <p:submenu label="New" icon="pi pi-fw pi-plus">
            <p:menuitem value="Bookmark" icon="pi pi-fw pi-bookmark"/>
            <p:menuitem value="Video" icon="pi pi-fw pi-video"/>
        </p:submenu>
        <p:menuitem value="Delete" icon="pi pi-fw pi-trash"/>
        <p:divider />
        <p:menuitem value="Export" icon="pi pi-fw pi-external-link"/>
    </p:submenu>
    ...
    <p:menuitem value="Quit" icon="pi pi-fw pi-power-off"/>
</p:tieredMenu>

See also:

Upvotes: 2

Related Questions