JSF bread crumbs produces extra arrow

 have the below JSF code which generates bread crumbs..

view plaincopy to clipboardprint?
Note: Text content in the code blocks is automatically word-wrapped
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:h="http://java.sun.com/jsf/html" 
                xmlns:f="http://java.sun.com/jsf/core" 
                xmlns:ui="http://java.sun.com/jsf/facelets">  
 
<ui:define name="breadcrumbs">  
        <h:link outcome="/pages/dashboard/dashboard.xhtml"><b:icon value="home" /></h:link>  
         <h:link outcome="/pages/campaign/campaign.xhtml" value="#{run.run.campaign.title}" 
                includeViewParams="true" styleClass="nowrap">  
            <f:param name="id" value="#{run.run.campaign.id}"/>  
        </h:link>  
          
        <ui:fragment rendered="${run.run.campaign.type == 'COMPOSITE'}">  
            <h:link outcome="/pages/campaign/campaign.xhtml" value="#{run.getSubCampaign().title}" 
                    includeViewParams="true" styleClass="nowrap">  
                <f:param name="id" value="#{run.getSubCampaign().id}"/>  
                <f:param name="summary" value="#{run.run.executingType eq 'HUMAN'}"/>  
            </h:link>  
        </ui:fragment>  
 
        <h:outputText value="#{run.run.uuid}"/>  
 
    </ui:define> 
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:define name="breadcrumbs">
        <h:link outcome="/pages/dashboard/dashboard.xhtml"><b:icon value="home" /></h:link>
   <h:link outcome="/pages/campaign/campaign.xhtml" value="#{run.run.campaign.title}"
                includeViewParams="true" styleClass="nowrap">
            <f:param name="id" value="#{run.run.campaign.id}"/>
        </h:link>
       
        <ui:fragment rendered="${run.run.campaign.type == 'COMPOSITE'}">
            <h:link outcome="/pages/campaign/campaign.xhtml" value="#{run.getSubCampaign().title}"
                    includeViewParams="true" styleClass="nowrap">
                <f:param name="id" value="#{run.getSubCampaign().id}"/>
                <f:param name="summary" value="#{run.run.executingType eq 'HUMAN'}"/>
            </h:link>
        </ui:fragment>

        <h:outputText value="#{run.run.uuid}"/>

    </ui:define>
 

The issue is that one member of the bread crumb list is conditional (rendered="${run.run.campaign.type == 'COMPOSITE'}"). This is causing an extra redundant bread crumb arrow to appear when that condition is not present. Here is the HTML output....

view plaincopy to clipboardprint?
Note: Text content in the code blocks is automatically word-wrapped
<ul class="breadcrumb" id="j_idt115">  
    <li><a ><i  
            class="icon-home " id="j_idt118"></i>  
    </a>  
    </li>  
    <span class="divider"><i class="icon-arrow-right " id="j_idt116"></i>  
    </span>  
    <li><a  class="nowrap" rel="nofollow">Classify  
            sentiment toward the topic</a>  
    </li>  
    <span class="divider"><i class="icon-arrow-right " id="j_idt116"></i>  
    </span>  
    <li></li>  
    <span class="divider"><i class="icon-arrow-right " id="j_idt116"></i>  
    </span>  
    <li>93a5cb47-cbe2-4e05-81c7-4b3dbffa5341</li>  
</ul> 
<ul class="breadcrumb" id="j_idt115">
 <li><a ><i
   class="icon-home " id="j_idt118"></i>
 </a>
 </li>
 <span class="divider"><i class="icon-arrow-right " id="j_idt116"></i>
 </span>
 <li><a  class="nowrap" rel="nofollow">Classify
   sentiment toward the topic</a>
 </li>
 <span class="divider"><i class="icon-arrow-right " id="j_idt116"></i>
 </span>
 <li></li>
 <span class="divider"><i class="icon-arrow-right " id="j_idt116"></i>
 </span>
 <li>93a5cb47-cbe2-4e05-81c7-4b3dbffa5341</li>
</ul>

Any suggestions?

I figured it out. I just created another breadcrumb list and wrapped it with the conditional statement like below...

view plaincopy to clipboardprint?
Note: Text content in the code blocks is automatically word-wrapped
 <ui:define name="breadcrumbs">  
        <h:link outcome="/pages/dashboard/dashboard.xhtml"><b:icon value="home" /></h:link>  
 
        <h:link outcome="/pages/campaign/campaign.xhtml" value="#{run.run.campaign.title}" 
                includeViewParams="true" styleClass="nowrap">  
            <f:param name="id" value="#{run.run.campaign.id}"/>  
        </h:link>  
      <h:outputText value="#{run.run.uuid}"/>  
    </ui:define>  
      
     <ui:fragment rendered="${run.run.campaign.type == 'COMPOSITE'}">  
     <ui:define name="breadcrumbs">  
        <h:link outcome="/pages/dashboard/dashboard.xhtml"><b:icon value="home" /></h:link>  
 
        <h:link outcome="/pages/campaign/campaign.xhtml" value="#{run.run.campaign.title}" 
                includeViewParams="true" styleClass="nowrap">  
            <f:param name="id" value="#{run.run.campaign.id}"/>  
        </h:link>  
 
       <h:link outcome="/pages/campaign/campaign.xhtml" value="#{run.getSubCampaign().title}" 
                    includeViewParams="true" styleClass="nowrap">  
                <f:param name="id" value="#{run.getSubCampaign().id}"/>  
                <f:param name="summary" value="#{run.run.executingType eq 'HUMAN'}"/>  
            </h:link>  
     
        <h:outputText value="#{run.run.uuid}"/>  
         </ui:define>  
      </ui:fragment>