Facelets strategy to identify current selected list item - css

Question

I am looking for a strategy to avoid code duplication across my site.
The problem is that I have a unordered list that get's repeated in each page I code.
The reason is that I have a list-item that contains an anchor to identify the currentPage. That get's repeated in each page I code.
The reason is that I have a list-item that contains an anchor to identify the currentPage.
This allows me to hilite it with css.
How can I define such a list in a way that I can change it dynamically in facelets?
<ui:define name="leftBar">
<ul class="leftNav">
<li id="home"><a id="**currentPage**" jsfc="h:link" outcome="home">#{global.homeInCaps}</a></li>
<li id="about"><a jsfc="h:link" outcome="about">#{global.aboutInCaps}</a></li>
<li id="blog"><a jsfc="h:link" outcome="blog">#{global.blogInCaps}</a></li>
<li id="tutorials"><a jsfc="h:link" outcome="tutorials">#{global.tutorialsInCaps}</a>
<ul class="leftSubNav">
<li><a jsfc="h:link" outcome="java">#{global.javaNormal}</a>
<ul class="leftSubNav">
<li><a jsfc="h:link" outcome="setupPath">#{global.path}</a></li>
</ul>
</li>
<li><a jsfc="h:link" outcome="ubuntu">#{global.ubuntuNormal}</a></li>
<li><a jsfc="h:link" outcome="virtualbox">#{global.virtualBoxNormal}</a></li>
</ul>
</li>
<li id="contact"><a jsfc="h:link" outcome="contact">#{global.contactInCaps}</a></li>
</ul>
</ui:define>

Answer 1

In JSF you can get the current view ID by
#{facesContext.viewRoot.viewId}
It will return the webcontent-relative path of the view file, e.g. /home.xhtml, /about.xhtml, etc. You could test it with help of the conditional operator in EL to set the classname.
<ui:param name="view" value="#{facesContext.viewRoot.viewId}" />
<li id="home"><a jsfc="h:link" outcome="home" class="#{view == '/home.xhtml' ? 'current' : ''}">#{global.homeInCaps}</a></li>
<li id="about"><a jsfc="h:link" outcome="about" class="#{view == '/about.xhtml' ? 'current' : ''}">#{global.aboutInCaps}</a></li>
<li id="blog"><a jsfc="h:link" outcome="blog" class="#{view == '/blog.xhtml' ? 'current' : ''}">#{global.blogInCaps}</a></li>
...
You can then style the link representing the current page with CSS
.leftNav .current {
color: pink;
}
Shouldn't the leftNav rather be an id?