MenuItem not working

[idmanishkumar]

Hi All,

I am trying to create a side menu bar using primefaces. It is getting created and looking fine. but while clicking on any of the menuitem it is getting the complete page reloaded, due to which by default first tab is always showing expanded and selected menu item head is getting collapsed. PFB the below sample code. Could you please let me know how can we stop the page reload or how can we set the attribute so that the selected menu tab will be expanded and other tabs will be collapsed.

<h:form id="form">
<p:growl showDetail="true" />
<p:accordionPanel multiple="true" dynamic="true" cache="true">
<p:tab id="Approval" title="Approval" activeIndex="2">
<p:menu>
<p:menuitem id="Approval1" value="Reference Data" icon="ui-icon-calculator"
outcome="/pages/approval/referenceDataSummaryList.xhtml" isAjax="true"/>
<p:menuitem id="Approval2" value="Billing Entity" icon="ui-icon-person"
outcome="/pages/approval/billingEntitySearchOutput.xhtml" isAjax="true"/>
<p:menuitem id="Approval3" value="Template Upload" icon="ui-icon-document"
outcome="/pages/approval/searchTemplateResults.xhtml" isAjax="true"/>
<p:menuitem id="Approval4" value="Pricing" icon="ui-icon-suitcase"
outcome="/pages/approval/searchPricingResults.xhtml" isAjax="true"/>
</p:menu>
</p:tab>
<p:tab id="Reference_Data" title="Reference Data" icon="ui-icon-folder-collapsed" activeIndex="1">
<p:menu>
<p:menuitem id="Reference_Data1" value="Clients" icon="ui-icon-person"
outcome="/pages/referenceData/clientList.xhtml" tabIndex="1" isAjax="true"/>
<p:menuitem id="Reference_Data2" value="Accounts" icon="ui-icon-newwin"
outcome="/pages/hierarchy/accountList.xhtml" isAjax="true"/>

</p:menu>
</p:tab>
</p:accordionPanel>
</h:form>