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.