Implementing Custom Breadcrumbs in Webcenter

In Webcenter portal, Breadcrumbs can be implemented using the component af:breadcrumbs.

Sample Code from Oracle Docs to render navigation model's Menu Model as a breadcrumb -

<af:breadCrumbs id="bc1"
    var="node"
    value="#{navigationContext.currentNavigationModel.defaultMenuModel}">
  <f:facet name="nodeStamp">
    <af:commandNavigationItem id="cni1"
        text="#{node.title}"
        actionListener="#{navigationContext.processAction}"
        partialSubmit="true">
      <f:attribute name="node" value="#{node}"/>
    </af:commandNavigationItem>
  </f:facet>
</af:breadCrumbs>

But, sometimes there is a requirement where you need to hide some navigation items in the  breadcrumbs based on the conditions. If you use the component af:breadcrumb then you can hide the navigation item after putting render condition in af:commandNavigationItem. Issue here is even after putting the render condition, it doesn't hide the arrow icon (>) , so your breadcrumb will look like - 

Node 1 > Node 2 >> Node 4

To avoid this, it's better to implement custom breadcrumbs by iterating over the

Navigation Model - 

<af:panelGroupLayout id="pt_pgl4" layout="horizontal"> 

<af:iterator id="pt_i2"
             value="#{navigationContext.defaultNavigationModel.currentSelection.ancestors}"
             var="ancestor">
  <af:commandLink text="#{ancestor.title}"
                  id="pt_cl3"
                  actionListener="#{navigationContext.processAction}"
                  action="pprnav"
                  rendered="#{ancestor.navigable}"
                  disabled="#{ancestor.currentlySelected or (ancestor.attributes['disableBreadcrumbLink'] eq 'true')}">
     <f:attribute name="node"
                 value="#{ancestor}"/>
  </af:commandLink>
<af:panelGroupLayout id="pt_pgl5" layout="horizontal"
                   rendered="#{!ancestor.currentlySelected and ancestor.navigable}">
<af:outputText value="›" id="pt_ot21" />
</af:panelGroupLayout>
</af:iterator>
</af:panelGroupLayout>

In CustomBreadCrumb implementation, you can put conditions for commandLink rendered property
 rendered="#{ancestor.navigable}"
If the node is of type folder then it is not navigable and will not appear in the breadcrumb.



You can also add conditions to disabled property  -

disabled="#{ancestor.currentlySelected or (ancestor.attributes['disableBreadcrumbLink'] eq 'true')}"

If the node is currently selected than disable the command link. disableBreadcrumbLink is the custom property added in the navigation model to control the breadcrumb behaviour.

Adding Custom Properties in Navigation Model

Add the descriptor in the navigation-model.xml - 



 
 After adding descriptor, set the value for the custom property under URL Attributes section -