title: PrimeFaces Ajax Navigation with Browser History/Hashtag
body: <p>I have implemented a web application which is a one-page-design. Which basically loads a single page then updates with AJAX the central content. The code is the following:</p>
  
  <pre><code>    &lt;h:body&gt;
  
          &lt;pe:layout id="page" fullPage="true"&gt;
  
  
              &lt;!-- West --&gt;
              &lt;pe:layoutPane id="west" position="west" &gt;
                  &lt;f:facet name="header"&gt;Main Menu&lt;/f:facet&gt;
  
                  &lt;h:form id="form1"&gt;
  
                      &lt;p:panelMenu id="panelMenu"&gt;
  
  
                          &lt;p:submenu label="Persons"&gt;
  
                              &lt;p:menuitem value="Person List" update=":centerpanel"
                                  actionListener="#{layout.setAll('formPersonList.xhtml', 'Person List')}"&gt;                           
                              &lt;/p:menuitem&gt;
  
                          &lt;/p:submenu&gt;
  
  
  
                      &lt;/p:panelMenu&gt;
                  &lt;/h:form&gt;
              &lt;/pe:layoutPane&gt;
  
              &lt;!-- Center --&gt;
              &lt;pe:layoutPane id="content" position="center"&gt;
  
                  &lt;h:panelGroup id="centerpanel" layout="block"&gt;
                      &lt;ui:include id="include" src="#{layout.navigation}" /&gt;
  
                  &lt;/h:panelGroup&gt;
  
              &lt;/pe:layoutPane&gt;
          &lt;/pe:layout&gt;
  &lt;/h:body&gt;
  </code></pre>
  
  <p>This basically works, but I want to enable browser navigation as well. For example like: <a href="http://ticketmonster-jdf.rhcloud.com/" rel="nofollow">http://ticketmonster-jdf.rhcloud.com/</a> with the hashtags on the url. So using the back/forward button I can go to the equivalent option.
  Any idea how to do this?</p>