The breadcrumb remains on the index page when clicking Home

[aki_Z]

I have a question. I currently have a breadcrumb widget. Previously, when I clicked the Home breadcrumb, it would navigate to the index page. Since the index page did not have the breadcrumb, the breadcrumb would disappear.

Now, when I click the Home breadcrumb, it still navigates to the index page, but the breadcrumb remains as part of the header (fixed at the top like the menu) and does not disappear. Only after manually refreshing the page does the breadcrumb disappear from the index page.

What type of issue is this? I’m not sure what to investigate, and it doesn’t seem to be a widget problem.

The initial Home page does not have a breadcrumb.

Now a breadcrumb appears, and when clicking Home

The breadcrumb appears on the index page, even though I haven’t placed the breadcrumb widget on the index page. After refreshing the page, the breadcrumb on the index page disappears.

What is the reason for this? I am very distressed. Please help me. Thank you very much.

[Nehal Dhuri]

Could you please confirm whether this is a custom breadcrumb or OOB?

[Nehal Dhuri]

if it is custom then please share your code so that we can debug it

[aki_Z]

But I feel this might not have much to do with the widget. Since the breadcrumb I cloned also shows the same situation, and I remember that this issue didn’t exist at the beginning, the widget itself should not have been modified. However, now this problem appears. This is just my personal thought, and it could be wrong. I hope this can make it easier for you to help me. Thank you very much.

[aki_Z]

Thank you very much. This is the breadcrumb I cloned, but the same situation also occurs when I use the OOTB breadcrumb.

Here is the code of the breadcrumb I cloned.

HTML：

<!--<div ng-if="breadcrumbsShow">-->

<div  ng-class="c.data.showSearchBox ? 'col-md-8' : 'col-md-12'" class="breadcrumbs">

<ul class="nav nav-pills nav-sm">

<li><a ng-href="?id={{portal.homepage_dv}}">${Home}</a></li>

  <li><i class="fa fa-chevron-right flip-icon-rtl"></i></li>

  <li ng-if="portal.homepage_dv != 'kb_home'"><a ng-href="?id={{portal.homepage_dv}}"><!--<a ng-href="?id={{$root.showKbHomeLink? portal.kb_knowledge_page_dv : 'kb_home'}}">-->${Knowledge}</a></li>

  <li ng-if="portal.homepage_dv != 'kb_home'"><i class="fa fa-chevron-right flip-icon-rtl"></i></li>

  <li ng-if="!c.breadcrumbs && c.data.page_id!='kb_article_view'"><a href ng-bind="::page.title"></a></li>

  <li ng-repeat-start="item in c.breadcrumbs">

    <a ng-href="{{::item.url}}" ng-bind="::item.label"></a>

  </li>

  <li ng-repeat-end>

    <i class="fa fa-chevron-right flip-icon-rtl"></i>

  </li>

      <li ng-if="c.breadcrumbs && c.breadcrumbs.length">

        <span>{{::page.title.split('-')[1].trim()}}</span>

      </li>

 </ul>

</div>

<div ng-if="c.data.showSearchBox" class="col-md-4 typeahead-search">

<widget id="typeahead-search" options="data.search_options"></widget>

</div>

<!--</div>-->

<style>

  @media only screen and (max-width: 991px){

    main {

      padding-top : 0px !important;

    }

  }

</style>

CSS：

.nav-pills i {

margin-top: 5px;

padding-left: 7px;

padding-right: 7px;

padding-bottom: 15px;

}

.disabled{

  text-decoration:none;

  cursor:default;

  color:$text-color;

}

.breadcrumbs {

padding-left: 5px; 

padding-top: 15px;

}

.nav-pills li a {

padding: 0px;

}

.typeahead-search {

padding-right: 0px; 

}

service script：

(function() {

    data.sysparm_kb_search_table = $sp.getParameter('sysparm_kb_search_table');

    data.page_id = $sp.getParameter('id');

    data.showSearchBox = (options.show_search_box && options.show_search_box == "true") || false;

    var portalRecord = $sp.getPortalRecord();

    var portal = portalRecord.getUniqueValue();

    if ($sp.isAISearchEnabled())

        data.search_options = options;

    else

        data.search_options = options.search_options || {};

    data.showKbHomeLink = (portal != '45d6680fdb52220099f93691f0b8f5ad');

    //data.breadcrumbsShow = (data.page_id == "kb_article_view" || data.page_id == "kb_search");

})();

Client controller：

function($scope, $rootScope, $timeout,$location) {

    var c = this;

    $rootScope.showKbHomeLink = c.data.showKbHomeLink;

    $scope.$on("sp.update.breadcrumbs", function(e, list) {

        c.breadcrumbs = [];

        console.log('sp.update.breadcrumbs');

        if (list && list.length > 0) {

            var last = list[list.length - 1];

            c.breadcrumbs.push(last);

        }

    });

    $timeout(function() {

        if ($rootScope.readOnly) {

            $(".nav-pills").find("a").removeAttr("href").addClass("disabled");

        }

    }, 200);

    //$scope.breadcrumbsShow = $scope.data.breadcrumbsShow;

    $scope.$on('$locationChangeSuccess', function() {

        var pageId = ($location.search() && $location.search().id) || '';

        //$scope.breadcrumbsShow = (pageId === "kb_article_view" || pageId === "kb_search");

        console.log('pageId'+pageId);

        console.log('c.breadcrumbs'+JSON.stringify(c.breadcrumbs, null, 2));

    });

}