今作っているWebアプリですが、ログインユーザー権限によりメニューのリンク表示を切り替える要件の実装について、一緒に作ってるメンバーに聞いてみたら、bootstrapのnavbarがかっこいいとの事で使ってみました。
各画面で指定するテンプレートxhtmlにbootstrapのnavbarをセットする形です。なお、bootstrapのバージョンは少し古いですが2.3.2を使ってます。
bootstrapをダウンロードしたら、Webソース内のresourcesにダウンロードした各ディレクトリを入れ、メニューを表示する各画面xhtmlでは、下記のようにテンプレートを指定します。

<ui:composition template="../templates/menu.xhtml">

テンプレートとして指定したmenu.xhtmlですが、その中の「SessionManager」はログイン情報を保持しているSessionScopedBeanで、ログイン時にログイン日時をlogintimeに、各権限の値をroleCdにセットし、xhtml側ではui:fragmentのrenderedで表示を切り替えます。

<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="bootstrap/css/bootstrap-responsive.css" />
<h:outputScript name="bootstrap/js/bootstrap.js" />
<h:body>
  <nav class="navbar navbar-inverse navbar-default">
    <div class="navbar-inner">
    <div id="container">
      <h:form>
        <ul class="nav navbar-nav">
          <ui:fragment rendered="#{SessionManager.roleCd == 1}">
            <li><a href="../sales/page1.xhtml">ファイル照会</a></li>
            <li><a href="../sales/page2.xhtml">状態確認</a></li>
            <li><a href="../common/pwchange.xhtml">パスワード更新</a></li>
          </ui:fragment>
          <ui:fragment rendered="#{SessionManager.roleCd == 2}">
            <li><a href="../usermanage/page1.xhtml">ユーザー管理</a></li>
            <li><a href="../usermanage/page2.xhtml">ユーザー一覧</a></li>
            <li><a href="../common/pwchange.xhtml">パスワード更新</a></li>
          </ui:fragment>
・・・他の設定は割愛
          <ui:insert name="navlinks" ></ui:insert>
        </ul>
        <h:commandButton class="btn btn-primary btn-lg pull-right" value="ログアウト" action="#{SessionManager.logout}" />
        <h:outputText class="span3 pull-right" style="color: #ffffff;" value="#{SessionManager.logintime}"/>
        </h:form>
      <ui:insert name="navinfo"/>
    </div>
    </div>
  </nav>

ログインした権限に従い下記のようにメニューを表示されます。