Twitter Bootstrap + JSF 2 - Active menu style

Question

<ul class="nav">
    <li class="active"><a href="home.xhtml">Home</a></li>
    <li><a href="about.xhtml">About us</a></li>
    <li><a href="contact.xhtml">Contact us</a></li>                         
</ul>

Is there an easy way to template this using JSF so I dont have to include it on each page?

Check this first http://stackoverflow.com/q/6341427/1478467 (params should be what you are looking for to keep the active on the right menu) — Sherbrow, Sep 18 '12 at 11:36

score 12 · Accepted Answer · answered Sep 18 '12 at 12:38

You can use #{view.viewId} in EL to get the current view ID.

So, this should make it generic for all pages:

<ul class="nav">
    <li class="#{view.viewId == '/home.xhtml' ? 'active' : ''}"><a href="home.xhtml">Home</a></li>
    <li class="#{view.viewId == '/about.xhtml' ? 'active' : ''}"><a href="about.xhtml">About us</a></li>
    <li class="#{view.viewId == '/contact.xhtml' ? 'active' : ''}"><a href="contact.xhtml">Contact us</a></li>                         
</ul>

It'd be more DRY if you have a collection of pages somewhere in the EL scope:

<ul class="nav">
    <ui:repeat value="#{app.pages}" var="page">
        <li class="#{view.viewId == page.viewId ? 'active' : ''}"><h:link value="#{page.title}" outcome="#{page.viewId}" /></li>
    </ui:repeat>
</ul>

Note that the <h:link> will automatically prepend the context path in the URL, so having / in the view ID doesn't matter.

if all my files are in a directory e.g. /secure/home.xhtml, is there a way of doing "#{view.viewId == '/secure/home.xhtml' ? 'active' : ''}" without having to reference secure? — DD., Sep 26 '12 at 17:42

score 0 · Answer 2 · answered May 26 '14 at 08:52

For DRY solution I would prefere not have list of pages somewhere out.

My solution is based on custom component:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:c="http://java.sun.com/jsp/jstl/core" >
<composite:interface>
    <composite:attribute name="outcome" />
    <composite:attribute name="label" />
</composite:interface>

<composite:implementation>
    <li class="menuItem #{view.viewId == cc.attrs.outcome ? 'active' : ''}">
        <h:outputText value="#{cc.attrs.label}" rendered="#{view.viewId eq cc.attrs.outcome}"/>
        <h:link outcome="#{cc.attrs.outcome}" value="#{cc.attrs.label}" rendered="#{view.viewId ne cc.attrs.outcome}" />
    </li>
</composite:implementation>
</html>

Used in code:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:my="http://java.sun.com/jsf/composite/my">
...
<ul class="nav">
     <my:menuItem outcome="/home.xhtml" label="Home" />
</ul>

Twitter Bootstrap + JSF 2 - Active menu style

2 Answers2

Linked