Search code examples
imagejsfprimefacesmenubar

How to add an image to a primefaces menubar?

How can I add an image to a menubar?

I can not add the h:graphicImage to the MenuBar (see code below), and would like to have the logo in the menubar.

enter image description here

Current code: The image comes on top

<h:form id="navigation">

    <h:link outcome="/index.xhmtl">
        <h:graphicImage url="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg" height="75"/>
    </h:link>

    <p:menubar>
        <p:submenu label="Routine">
            <p:menuitem value="Item 1" outcome="/routine/item1.xhtml"/>
            <p:menuitem value="Item 2" outcome="/routine/item1.xhtml"/>
            <p:menuitem value="Item 3" outcome="/routine/item1.xhtml"/>
        </p:submenu>
        <p:submenu label="Lab">
            <p:menuitem value="Item 1" outcome="/lab/item1.xhtml"/>
            <p:menuitem value="Item 2" outcome="/lab/item2.xhtml"/>
        </p:submenu>
        ...
        <p:menuitem value="Log out" action="#{userBacking.logout()}" />
    </p:menubar>

</h:form>
Solution

  • Add the graphicImage in a menuItem:

    <p:menuitem>
    <h:link outcome="/index.xhmtl">
        <h:graphicImage name="/customer/0_0_1/img/logo.png" height="50" />
    </h:link>
</p:menuitem>