I am navigating through several documents,and i noticed that the top page title doesnt show the full navigation hiearchy.

enter image description here

When i click on a document in tylers the "Domestic" dissapear enter image description here

What i want is the page title to show Domestic->Tylers->Bank Statement

UPDATED: i used the answer below using the javascript method but whenever i click on a document set,the document library containing the documents sets shows up twice.[note am using the classic experience] [enter image description here]3

enter image description here


If you are having your document sets at level 3, you will have to skip the level 3 concatenation in the script:

SP.SOD.executeOrDelayUntilEventNotified(addBreadcrumb, "sp.bodyloaded");

function addBreadcrumb() 
    if (!document.querySelector("#pageTitle span span span")) {
        document.querySelector("#pageTitle").style.display = 'block';

var elementsInPageTitle = document.querySelector("#pageTitle span").outerHTML;
var breadcrumbDivider = '<span style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;"><img src="/_layouts/15/images/spcommon.png?rev=42" alt=":" style="position:absolute;left:-109px !important;top:-232px !important;"/></span>';
var allBreadcrumbElements = "";

var siteTitle = _spPageContextInfo.webTitle;
var elementIsExistsPageTitle = function(el) {
    return [].some.call(document.querySelectorAll
    ("#pageTitle span span span"), function(sEl) {
        return el.innerText == sEl.innerText;

var breadcrumbClassName = "";

if (document.querySelectorAll(".s4-breadcrumb li a").length) {
    breadcrumbClassName = ".s4-breadcrumb li a";
} else {
    breadcrumbClassName = ".ms-breadcrumb li a";

var indexOfTheLastElement = document.querySelectorAll(breadcrumbClassName).length - 1;
var count =1;
[].forEach.call(document.querySelectorAll(breadcrumbClassName), function(el, index) {
        if (!(index == indexOfTheLastElement && elementIsExistsPageTitle(el))) {
                    allBreadcrumbElements += '<span>' + 
                    el.outerHTML + '</span>' + breadcrumbDivider;   




allBreadcrumbElements += elementsInPageTitle;

document.querySelector("#pageTitle").innerHTML = allBreadcrumbElements;
document.querySelector("#pageTitle").style.display = 'block';



I believe you cannot change this through configuration and you may have to modify the master page through designer etc

Check this

  • can you show me an implementation of it,i cant figure where to put the codes. Sep 6 '17 at 10:18

This blog works:https://www.codeproject.com/Tips/1080535/Adding-Breadcrumb-in-SharePoint

Note:the breadcrumb.js file at line 11,the image tag need to be close.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.