breadcrumb on sharepoint online

Question

How to you create a breadcrumb in SharePoint online. I heard this is not available on SharePoint online?.

is there any work around ? and custom code that can enable the master pages ?

Answer 1

Create Custom

1. In SharePoint Designer 2013, open the site and click "All Files" in left pane.
2. Double click "_catalogs" and select "masterpage".
3. Find and Open seatle.master (Right click -> Edit in Advanced Mode). If it's asking to check out, then Check out. Later we'll discard the check out.
4. Select all the code in seatle master page and copy.
5. Select "All Files Tab -> File -> Blank Master Page".
6. Remove all code in this and paste the code which we copied from Seattle master.

Enable Breadcrumb

1. In the master page, search for below code. <div class="ms-breadcrumb-dropdownBox" style="display:none;">
2. In this line, delete the CSS style attribute. <div class="ms-breadcrumb-dropdownBox" style="display:none;">
3. Search for "SharePoint:PopoutMenu" and change the "Visible" property value from "false" to "true". <SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server"> <SharePoint:PopoutMenu Visible="true" runat="server" ID="GlobalBreadCrumbNavPopout" Icon="/_layouts/15/images/spcommon.png?rev=23"
4. Save the master page, Check in and Publish as Major version.

That's it. We're almost done.

Apply Custom Master Page

If the icon didn't appear then you need to set/apply the Custom Master page to the site.

1. Navigate to "Site Settings" page (Click Gear icon on Top right and select "Site Settings").
2. Under "Look and Feel" section, click "Master page". (You should have site owner permission to modify master page.)
3. In Site Master Page section, click the first dropdown and select the Custom Master page.
4. Click "OK" button on the bottom to save the settings.

Now navigate to site pages and you'll see Breadcrum ("Navigate Up") icon. :)

Different solution are in Google for Reference:

Create a modern breadcrumb navigation on SharePoint

SharePoint 2013 Branding: Show folder breadcrumbs as an inline breadcrumbs navigation

SharePoint 2013: Breadcrumb for list/library

breadcrumb back to SharePoint 2013!

Answer 2

you can use jQuery code to do that.

A demo:

    $.ajax(

{

    url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/parentweb”,

    method: “GET”,

    headers: {“Accept”: “application/json; odata=verbose”},

    success: function(data)

    {

if (data.d.ServerRelativeUrl)

        {

            console.log(‘Parent site title: ‘ + data.d.Title)

var upSiteUrl = “”;

            upSiteUrl += “<span class=’upLink’>”

            upSiteUrl += “<a href='” + data.d.ServerRelativeUrl + “‘ title=’Back up to > ” + data.d.Title + “‘>”

            upSiteUrl += “<img src=’/sites/global/SiteAssets/IMG/up16.png’>”

            upSiteUrl += “</a>”

            upSiteUrl += “</span>”;

            $(‘#zz11_RootAspMenu’).before(upSiteUrl);

        }

    }

});

https://clouddeveloper.space/2017/04/07/breadcrumb-for-office-365-sharepoint-online/

Answer 3

For custom breadcrumbs use this code below

1 – Go to the library where you want to add breadcrumb navigation
2 – From the landing page of the library, place the page in edit mode
3 – Add a script editor web part to the page, and paste the markup into the editor
4 – Save and close the page, and voila!

<script type="text/javascript">

// Variable to store the text used by SharePoint to generate the breadcrumb separator arrows
     var SeparatorArrow = '<span id="onetidPageTitleSeparator"><span><span style="height:11px;width:11px;position:relative;display:inline-block;overflow:hidden;"><img src="/_layouts/images/fgimg.png" alt=":" style="border-width:0px;position:absolute;left:-0px !important;top:-585px !important;" /></span></span> </span>';

     var baseURL = (document.location).toString();
     baseURL = baseURL.substring(0,baseURL.indexOf(".aspx")+5);

     var url = baseURL;                             
     url = baseURL + '?RootFolder=';

     var rootFolder = unescape(GetUrlParameter('RootFolder'));      
     var path = GetFolderPath(rootFolder);   
     rootFolder = rootFolder.substring(0,rootFolder.indexOf(path));  

     document.write('<div style="background: #ffff99; padding: 5px; border-radius: 4px; border: 1px solid #cccccc; margin-bottom:-10px;"><b>Folder Location:</b>');
     document.write(SeparatorArrow);

     if(path.length > 0)
     {
         var folders = path.split('/');
         for(var i=0; i < folders.length; i++)
         {
              if(i==0)                             
                    url += encodeURIComponent(rootFolder.substring(0,rootFolder.length-1));
                    url += encodeURIComponent('/' + folders[i]);

              if(i<folders.length-1)
              {
                   //Add the folder link and separator arrows if more than one folder level deep
           document.write('<a href="' + url + '&FolderCTID=' + GetUrlParameter("FolderCTID") + '&View=' + GetUrlParameter("View") + '">' + folders[i] + '</a>');
                   document.write(SeparatorArrow);             
              }
              else
              {
                   if(folders.length>1)
                        document.write(folders[i]);
              }             
         }
     }  
    document.write('</div>');

// Gets the value of the requested URL Parameter
function GetUrlParameter( name )
{
     name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
     var regexS = "[\\?&]"+name+"=([^&#]*)";
     var regex = new RegExp( regexS );
     var results = regex.exec( window.location.href );
     if( results == null ) return "";
     else return results[1];
}

// Gets the name of the library
function GetFolderPath(rootFolder)
{
     var domain = window.location.hostname;
     var web = baseURL.substring(baseURL.indexOf(domain)+domain.length);
     var path = rootFolder.substring(GetFirstBreakIndex(web, rootFolder));
     return path;
}

// Gets the first different character occurrence index
function GetFirstBreakIndex(a, b)
{
     var slashIndex = -1;
     var equalsReturnCode = -1;
     if (a && b)
     {
          var longest = b.length > a.length ? b : a;
          var shortest = a.length > b.length ? b : a;

          for(var i=0; i < shortest.length; i++)
          {
               // Get location of each / as a breakpoint if
               // the first break index is part way into the string
               if(shortest.charAt(i) == '/')
                    slashIndex = i;
               if(shortest.charAt(i) != longest.charAt(i))
               {
                    if(i-slashIndex == 1)
                         return i;
                    else
                         return slashIndex + 1;
               }
          }
     }
     else
     {
          return equalsReturnCode;
     }
}
</script>

Link reference: http://robertmcquaig.com/sharepoint/document-library-breadcrumbs/