Home/ Questions/Q 8978227
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T19:33:34+00:00

How can I add links to <p:submenu /> for use with <p:megaMenu> ? For

  • 0

How can I add links to <p:submenu /> for use with <p:megaMenu>?

For example:

<!DOCTYPE html>
<ui:composition xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    template="/pages/template/homeTemplate.xhtml">

    <ui:define name="content">
        <p:megaMenu>
            <p:submenu label="Home" url="/" />
            <p:submenu label="Category" url="/cats">
                <p:column>
                    <p:submenu label="Category 1" url="/cats/cat1">
                        <p:menuitem value="Item 1" url="/cats/cat1/item1"/>
                        <p:menuitem value="Item 2" url="/cats/cat1/item2"/>
                        <p:menuitem value="Item 3" url="/cats/cat1/item3"/>
                    </p:submenu>
                </p:column>
            </p:submenu>
        </p:megaMenu>  
    </ui:define>

</ui:composition>

The <p:submenu /> doen’t have the url attribute, so it will be ignored, what can I do instead?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I was facing this issue, I found lot’s of people saying that it was not possible because primefaces doesn’t support it, but there’s a workaround if you don’t mind using a bit of javascript:

    <ui:composition xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    template="/pages/template/homeTemplate.xhtml">

    <ui:define name="content">
        <p:megaMenu id="megaMenu">
            <p:submenu label="Home" url="/" styleClass="homeLink" />
            <p:submenu label="Category" url="/cats" styleClass="catLink">
                <p:column>
                    <p:submenu label="Category 1" styleClass="cat1Link">
                        <p:menuitem value="Item 1" url="/cats/cat1/item1"/>
                        <p:menuitem value="Item 2" url="/cats/cat1/item2"/>
                        <p:menuitem value="Item 3" url="/cats/cat1/item3"/>
                    </p:submenu>
                </p:column>
            </p:submenu>
        </p:megaMenu>
        <script type="text/javascript">
        $(function(){
            $(".homeLink a:first").attr('href', "#{request.contextPath}/");
            $(".catLink a:first").attr('href', "#{request.contextPath}/cats");
            $(".cat1Link").click(function(){
                window.location.href="#{request.contextPath}/cats/cat1";
            }).css('cursor','pointer');
        });
        </script>
    </ui:define>

</ui:composition>

    What I did here was:

    1) I defined every <p:submenu> with an exclusive styleClass

    2) If the <p:submenu> is on the first line, I changed the <a>‘s href attribute to my link after the DOM is ready:

    $(function(){
    $(".homeLink a:first").attr('href', "#{request.contextPath}/");
    $(".catLink a:first").attr('href', "#{request.contextPath}/cats");
});

    3) If the <p:submenu> is part of a menu, I created an onclick attribute and customized the cursor to pointer since there’s no <a> tag there.

    $(".cat1Link").click(function(){
    window.location.href="#{request.contextPath}/cats/cat1";
}).css('cursor','pointer');

    This resulted in the menu that I needed, and of course, will not work if javascript is disabled, but now the menu will work with javascript enabled browsers.

    • 0