in web.xml
<context-param><param-name>facelets.LIBRARIES</param-name>
<param-value>/WEB-INF/somewhere/you/decide/whatever.tablib.xml</param-value>
</context-param>
in whatever.taglib.xml
<?xml version="1.0"?><!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://www.yourdomain.com/anothernameyoudecide</namespace>
<tag>
<tag-name>li</tag-name>
<source>li.xhtml</source>
</tag>
</facelet-taglib>
in li.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jstl/core">
<c:choose>
<c:when test="#{selectedPageName == pageName}">
<li class="#{class} menuItemSelected"><ui:insert /></li>
</c:when>
<c:otherwise>
<li class="#{class} menuItemNotSelected"><ui:insert /></li>
</c:otherwise>
</c:choose>
</ui:composition>
(I was particularily impressed to see that I could just add the existing classes as easy as it is done above. It's one of those rare moments when I think that it would be wonderful if it was this simple, -just to find out that it actually is!)
making the menu
<ui:component xmlns:jsp="http://java.sun.com/JSP/Page"xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:y="http://www.yourdomain.com/anothernameyoudecide"
xmlns:c="http://java.sun.com/jstl/core">
<ul class="horisontalMenu" id="topMenu">
<li jsfc="y:li" pageName="home"><a href="Home.faces">#{bundle['topmenu.home']}</a></li>
<li jsfc="y:li" pageName="search"><a href="Search.faces">#{bundle['topmenu.search']}</a></li>
<li jsfc="y:li" pageName="reports"><a href="Reports.faces">#{bundle['topmenu.reports']}</a></li>
</ul>
</ui:component>
setting the selected top menu
easy as just dropping this into the ui:composition of the facelet your displaying:<ui:param name="selectedPageName" value="home"/>