Primefaces Hash Navigation Using jQuery BBQ


With jQuery BBQ you can keep track of state, history and allow bookmarking (#hashtag) while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser’s back and next buttons, reload the page, it’s all there.

Integrating jQuery BBQ with JSF/Primefaces is pretty much straight forward.

Before make sure that you have these points:

  • Create your JSF Project
  • Download jQuery BBQ (here)
  • Include jQuery BBQ  into your resources js folder

I’m going to use Primefaces extensions for the predefined layout’s  sake (You can have your own menu and centered content layout).

Now the scenario is very simple, we have a master menu with links to our pages (outcome), we click a link the page doesn’t reload but reloads only the content of the centered container, and we have to make sure that this is bookmark-able and would work with the browser’s back and next buttons, and even if we reload the page .

I’m going to call our little project: Prime BBQ

The scenario should look like this



Create the main page.

As you can see that we included jQuery BBQ into our page

And we have a main menu, with all our navigation rules.

Meat Master Menu

In the center panel we have our center include.

this include would change based on the currentNav variable in our mainBean managedBean.

We have also a remoteCommand to change the currentNav to the current hashtag, and update our center panel include.


Create and included a javascript file. For example main.js (make sure you include it after jQuery BBQ)

And lastly our MainBean



For a working example, the project is available on Github


If you think something is wrong please feel free to comment :)
  1. asics bleu says:

    It’s very simple to find out any matter on net as compared to books, as I found this post at this

  2. BarnT says:

    Nice and smooth solution, thank you for sharing!

  3. mihawk says:

    I’m using in my project with JSF Mojarra and Spring Security but not running.