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.
