Site Breadcrumb for SharePoint 2013

As SharePoint 2013 came with lot of new features the one functionality that was removed from publishing site was the bread crumb. Definitely the navigation came with lot more control and options but still it is not as intuitive as it was in 2010. Current navigation has lot more control on the user and it can be driven very smoothly but still it has to be manually done.

In SharePoint 2010 the navigation just not provided a very efficient way to browse between sites and it’s relatives it also let u know where u are . Most of the time breadcrumb provides a users a pictorial a view about their browsing path which is very helpful while getting deep inside a site.

As we can see most of the commercial web sites built using any technology still provides that feature, it was a tough choice made in SharePoint 2013. However the Object model always comes handy in providing solutions to these kind of problems.

In this article i will talk about a user control which is worth 15 lines of c# codes that provides the breadcrumb for the site collection in SharePoint. This is a very simple few lines of code, i implemented in one of our client project.

Site Breadcrumb written in this article has following properties

Works for only publishing sites
Works for Managed metadata Navigation
Displays breadcrumb for pages and sub-sites
Implemented in SharePoint 2013.

let’s get started

Add a new SharePoint Empty Project
Pick the deploy as farm solution
From the menu add new item pick the user control template from the available SharePoint project templates.
Add following code in the .ascx file
Added a class called site_breadcrumb which you can style in your css as you want.
Add following code in the code behind file.
1. Add these three function
  1. string getBreadCrumbString(SPFile file, SPWeb web)
    {
    string strWebTitle = “”;
    string strWebLink = “”;SPSecurity.RunWithElevatedPrivileges(delegate()
    {
    
    strWebTitle = web.Title;
    SPFile rootfile = web.GetFile(web.RootFolder.WelcomePage);
    SPListItem item = rootfile.Item;
    strWebLink = GetPagesUrls(web);
    if (strBreadCrumbLinks.Trim().Length > 0)
    {
    strBreadCrumbLinks = “<a href='” + strWebLink + “‘>” + strWebTitle + “</a>” + “” + “ > ” + strBreadCrumbLinks;
    }
    else
    {
    if (SPContext.Current.ContextPageInfo.IsWebWelcomePage && web.Url == SPContext.Current.Web.Url)
    {
    strBreadCrumbLinks = strWebTitle;
    
    }
    
    else
    {
    strBreadCrumbLinks = “<a href='” + strWebLink + “‘>” + strWebTitle + “</a>” + “ > ” + file.Title;
    }
    }
    
    if (!web.IsRootWeb)
    {
    getBreadCrumbString(file, web.ParentWeb);
    }
    });
    return strBreadCrumbLinks;
    }.
  2. public string GetPagesUrls(SPWeb web)
    {
    string retval = “”;
    if (!web.IsRootWeb)
    {
    NavigationTerm term = GetWebDefaultPageTerm(web);
    if (term != null)
    {
    retval = web.Site.RootWeb.ServerRelativeUrl + term.GetWebRelativeFriendlyUrl();
    
    }
    else
    {
    retval = web.ServerRelativeUrl;
    }
    }
    else
    {
    retval = web.ServerRelativeUrl;
    
    }
    return retval;
    }.
  3. public static NavigationTerm GetWebDefaultPageTerm(SPWeb web)
    {
    
    NavigationTerm friendlyUrlterm = null;
    if (PublishingWeb.IsPublishingWeb(web))
    {
    PublishingWeb publishingWeb = PublishingWeb.GetPublishingWeb(web);
    SPListItem DefaultPage = publishingWeb.DefaultPage.Item;
    
    Guid listId = PublishingWeb.GetPagesListId(web);
    
    SPList pagesList = web.Lists[listId];
    
    IList<NavigationTerm> terms = TaxonomyNavigation.GetFriendlyUrlsForListItem(DefaultPage, true);
    
    string url = string.Empty;
    if (terms.Count > 0)
    {
    friendlyUrlterm = terms[0];
    }
    
    }
    return friendlyUrlterm;
    }
2. Add following code int he page_load event
  1. try
    {
    string strBreadCrumb = “”;
    SPSecurity.RunWithElevatedPrivileges(delegate()
    {
    strBreadCrumb = getBreadCrumbString(SPContext.Current.File, SPContext.Current.Web);
    var strLIs = strBreadCrumb.Split(‘|’);
    sbDivText.Append(“<ol class=\”breadcrumb\”>”);for (int I = 0; I < strLIs.Length; I++)
    {
    sbDivText.Append(“<li>”);
    sbDivText.Append(strLIs[I]);
    sbDivText.Append(“</li>”);
    
    }
    sbDivText.Append(“</ol>”);
    divBreadCrumb.InnerHtml = sbDivText.ToString();
    });
    }
    catch (Exception ex)
    {
    string strError = ex.ToString();
    }
  2. Add these variables in the code.cs file at the top
    1. string strBreadCrumbLinks = “”;
      StringBuilder sbDivText = new StringBuilder();
Your code file will look like this
Now compile the solutions and deploy.
Since it is a user control we have to add it to a page. In this case we will add it to our desired master page where we want the breadcrumb to display.
Let’s see where can we add
Turn on the developer mode on your browser usually F12 is the key to investigate where can we add our breadcrumb.
As you can see in the above picture between the divs “s4-titlerow” and “contentRow” will be the perfect place to add our breadcrumb.
If you are creating a custom master page always investigate from the UI perspective to find the correct location where you want your breadcrumb to appear.
Now lets edit the master page
Let us register our user control first. Add following code at the top of the master page
1. %@ Register TagPrefix=”BreadcrumbControl” TagName=”Breadcrumb” src=”~/_CONTROLTEMPLATES/NICHDWWW-PublishingSiteBreadCrumb/SiteBreadcrumb.ascx” %>
Once the user control is registered lets add it to the content in the master page
1. <BreadcrumbControl:Breadcrumb runat=”server”></BreadcrumbControl:Breadcrumb>
Now save and publish your master page new breadcrumb should appear right in the master page like below.