Let's say I have a xhtml file ( in a jsf app) containing a navigation menu and a content "frame":
<ul class="nav">
<li class="nav-item"><a href="#">First</a></li>
<li class="nav-item"><a href="#">Second</a></li>
<li class="nav-item"><a href="#">Third</a></li>
</ul>
</div>
<div class="col-sm-10" id="content">
</div>
I'd like to evaluate any options which would allow me to load a destination page in #content mantaining the nav list without reloading a full page with the nav list embedded every time, depending of which element of the menu is selected. I tried to put
<ui:insert>
<ui:include src="destination.xhtml" />
</ui:insert>
in #content, but that would always include the same page. Feel free to propose any solution involving facelets, primefaces and/or related tools. If a controller is needed, I'd prefer a js one than a java one. Thanks in advance, let me know if more details are needed.