Pfthb

In a Asp.Net website, we can simply add the breadcrumb by using the SiteMap and SiteMapPath. But the SiteMapPath adds a very simple breadcrumb on the website.

I want to customize the SiteMapPath on my website to contain icons from FontAwesome for each node present in the SiteMapPath. Also I want to design my SiteMapPath similar to the snippet that I have added below.

.breadcrumb-SiteMaster 
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 12px;


.breadcrumbSM 
 list-style: none;
 display: inline-block;


.breadcrumbSM .icon 
 font-size: 14px;


.breadcrumbSM li 
 float: left;


.breadcrumbSM li a 
 color: #FFF;
 display: block;
 background: #3498db;
 text-decoration: none;
 position: relative;
 height: 40px;
 line-height: 40px;
 padding: 0 10px 0 5px;
 text-align: center;
 margin-right: 23px;


.breadcrumbSM li:nth-child(even) a 
 background-color: #2980b9;


.breadcrumbSM li:nth-child(even) a:before 
 border-color: #2980b9;
 border-left-color: transparent;


.breadcrumbSM li:nth-child(even) a:after 
 border-left-color: #2980b9;


.breadcrumbSM li:first-child a 
 padding-left: 15px;
 -moz-border-radius: 4px 0 0 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px 0 0 4px;


.breadcrumbSM li:first-child a:before 
 border: none;


.breadcrumbSM li:last-child a 
 padding-right: 15px;
 -moz-border-radius: 0 4px 4px 0;
 -webkit-border-radius: 0;
 border-radius: 0 4px 4px 0;


.breadcrumbSM li:last-child a:after 
 border: none;


.breadcrumbSM li a:before, .breadcrumbSM li a:after 
 content: "";
 position: absolute;
 top: 0;
 border: 0 solid #3498db;
 border-width: 20px 10px;
 width: 0;
 height: 0;


.breadcrumbSM li a:before 
 left: -20px;
 border-left-color: transparent;


.breadcrumbSM li a:after 
 left: 100%;
 border-color: transparent;
 border-left-color: #3498db;


.breadcrumbSM li a:hover 
 background-color: #1abc9c;


.breadcrumbSM li a:hover:before 
 border-color: #1abc9c;
 border-left-color: transparent;


.breadcrumbSM li a:hover:after 
 border-left-color: #1abc9c;


.breadcrumbSM li a:active 
 background-color: #16a085;


.breadcrumbSM li a:active:before 
 border-color: #16a085;
 border-left-color: transparent;


.breadcrumbSM li a:active:after 
 border-left-color: #16a085;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="breadcrumb-SiteMaster">
 <ul class="breadcrumbSM">
 <li><a href="#"><span><i class="fa fa-home"></i></span></a></li>
 <li><a href="#"><span><i class="fa fa-file"></i></span> Projects</a></li>
 <li><a href="#"><span><i class="fa fa-angle-double-right"></i></span> Breadcrumb</a></li>
 <li><a href="#"><span><i class="fa fa-rocket"></i></span> Getting started</a></li>
 <li><a href="#"><span><i class="fa fa-arrow-down"></i></span> Download</a></li>
 </ul>
</div>

I tried using the CSS in the SiteMapPath but it didn't worked.

Found the answer to the problem. Did some searching on google and found out that by using the ControlAdapter and BrowserFile I can edit the SiteMapPath to be similar to the Bootstrap Breadcrumb.

First you need to add a class named SiteMapPathControlAdapter which will inherit the WebControlAdapter and then in there you can edit the layout for the SiteMapPath

public class SiteMapPathControlAdapter : WebControlAdapter

 public virtual string LinkCssClass
 get; set; 
 protected override void RenderBeginTag(HtmlTextWriter writer)
 
 writer.WriteLine();
 writer.WriteBeginTag("div");
 writer.WriteAttribute("class", ((System.Web.UI.WebControls.SiteMapPath)(Control)).CssClass);
 writer.Write(HtmlTextWriter.TagRightChar);
 writer.WriteBeginTag("ul");
 writer.WriteAttribute("class", "breadcrumbSM");
 writer.Write(HtmlTextWriter.TagRightChar);
 
 protected override void RenderEndTag(HtmlTextWriter writer)
 
 writer.WriteEndTag("ul");
 writer.WriteEndTag("div");
 writer.WriteLine();
 
 protected override void RenderContents(HtmlTextWriter writer)
 
 writer.Indent++;
 SiteMapPath item = (SiteMapPath)Control;
 SiteMapProvider Provider = ((System.Web.UI.WebControls.SiteMapPath)(Control)).Provider;
 SiteMapNodeCollection collection = new SiteMapNodeCollection();
 SiteMapNode node = Provider.CurrentNode;
 if (node != null)
 

 collection.Add(node);
 while (node != Provider.CurrentNode.RootNode)
 
 node = node.ParentNode;
 collection.Add(node);
 

 
 BuildItems(collection, true, writer);
 writer.Indent--;
 writer.WriteLine();
 
 private void BuildItems(SiteMapNodeCollection items, bool isRoot, HtmlTextWriter writer)
 
 if (items.Count > 0)
 
 writer.WriteLine();

 writer.Indent++;
 for (int i = items.Count - 1; i > -1; i--)
 
 BuildItem(items[i], writer);
 
 writer.Indent--;
 writer.WriteLine();
 
 
 private void BuildItem(SiteMapNode item, HtmlTextWriter writer)
 
 if ((item != null) && (writer != null))
 
 if (item.Url.Length > 0)
 
 writer.WriteLine();
 writer.WriteBeginTag("li");
 writer.Write(HtmlTextWriter.TagRightChar);

 writer.WriteBeginTag("a");
 writer.WriteAttribute("href", Page.ResolveUrl(item.Url));
 writer.Write(HtmlTextWriter.TagRightChar);

 writer.WriteBeginTag("span");
 writer.Write(HtmlTextWriter.TagRightChar);

 writer.WriteBeginTag("i");
 writer.WriteAttribute("class", string.Format("fa fa-0", item.Description));
 writer.Write(HtmlTextWriter.TagRightChar);
 writer.WriteEndTag("i");

 writer.WriteEndTag("span");

 if (item.Title == "Home")
 
 writer.Write("");
 
 else
 
 writer.Write(string.Format(" 0", item.Title));

 writer.WriteEndTag("a");

 writer.WriteEndTag("li");

 writer.WriteLine();
 
 
 
 

}

After this add a BrowserFile to your project and link it to the ControlAdapter class that was added recently in your project by adding the following lines in the BrowserFile.

<browser refID="Default">
 <controlAdapters>
 <adapter controlType="System.Web.UI.WebControls.SiteMapPath" adapterType="SiteMapPathControlAdapter" />
 </controlAdapters>
</browser>

Then all you need to do is add the SiteMapPath in the Site.Master to be available on all the pages and set the CssClass to breadcrumb-SiteMaster and you are good to go.