Remove Breadcrumb last node link

Question

We are using the Sitecore SXA Breadcrumb component. It is showing perfectly fine on the page, however the last node (current page) is showing as a link. We don't want to show the last node as link. Could someone assist me on this?

Answer 1

• front-end - your last element should contain CSS class: last. Use this information to manipulate existing HTML - modify with CSS/JSS
• back-end - modify view: \Views\Breadcrumb\Breadcrumb.cshtml - i.e render n-1 elements and last (n) separately.
• content - modify your variant definition. create 2 variations (1. for last element without link, 2. for the rest). Control which variant field version (with link or w/o link) should be used with Rules field.

Answer 2

As far as I know, this cannot be done out of the box.

You will need to override Sitecore.XA.Feature.Navigation.Repositories.Breadcrumb.BreadcrumbRepository and its BuildBreadcrumb method.

Here is code for custom BuildBreadcrumb method (not tested - check if it works for you):

public override IEnumerable<Item> BuildBreadcrumb(Item currentItem, Item rootItem)
{
    IEnumerable<Item> breadcrumb = base.BuildBreadcrumb(currentItem, rootItem);
    if (breadcrumb != null && breadcrumb.Any())
        return breadcrumb.Take(breadcrumb.Count() - 1);
    return breadcrumb;
}

and config to include register custom repository:

<sitecore>
  <services>
    <register
      serviceType="Sitecore.XA.Feature.Navigation.Repositories.Breadcrumb.IBreadcrumbRepository, Sitecore.XA.Feature.Navigation">
      <patch:attribute name="implementationType">custom.Feature.Navigation.Repositories.LanguageSelector.CustomBreadcrumbRepository, custom.Feature.Navigation</patch:attribute>
    </register>
  </services>
</sitecore>

Answer 3

You could use CSS to target the last link in the breadcrumb and make it unclickable. Something like this might work.

ul.breadcrumb> li:last-of-type a {
    pointer-events: none;
    cursor: default;
}

Answer 4

The best way should be to clone the Breadcrumb component and modify the View file a bit.

    @if (Model.BreadcrumbElements.Any())
    {
        if (Model.BreadcrumbElements.Count() > 1)
        { 
            <div class="breadcrumb container container-large">
                <nav aria-label="breadcrumb">
                    <ul class="breadcrumb__list">
                    //Change the count to be used to Model.BreadcrumbElements.Count - 1
                        @for (int i = 0; i < Model.BreadcrumbElements.Count - 1; i++)
                        {
                            //The last item in this case will be previous to last one
                            if (i + 1 != Model.BreadcrumbElements.Count - 1)
                            {
                                <li class="breadcrumb__item">
                                    <a class="breadcrumb__link" href="@Model.BreadcrumbElements[i].Url">@Model.BreadcrumbElements[i].Name</a>
                                </li>
                            }
                            else
                            {
                                <li class="breadcrumb__item">
                                    <span class="breadcrumb__link breadcrumb__link--current" aria-current="page">@Model.BreadcrumbElements[i].Name</span>
                                </li>
                            }
                        }
                    </ul>
                </nav>
            </div>
        }
    }