How to use Bootstrap style of BreadCrumb with my ASP.NET menu?

Question

I am a new ASP.NET developer and a new user of Twitter Bootstrap. I am trying to have a breadcrumb in my ASP.NET application. I already developed it but I am trying to apply the style of Twitter Breadcrumb on it. It is really too difficult to apply specific CSS style to ASP.NET web-forms control.

So how to do that?

My ASP.NET Code:

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"></asp:Menu>
        <asp:SiteMapPath ID="SiteMap1" runat="server" PathSeparator=" > " ParentLevelsDisplayed="1" 
            PathDirection="RootToCurrent" RenderCurrentNodeAsLink="false" ShowToolTips="true"></asp:SiteMapPath>

Twitter Bootstrap style of Breadcrumb:

<style>
        .breadcrumb
        {
            padding: 8px 15px;
            margin-bottom: 20px;
            list-style: none;
            background-color: #f5f5f5;
            border-radius: 4px;
        }

            .breadcrumb > li
            {
                display: inline-block;
            }

                .breadcrumb > li + li:before
                {
                    padding: 0 5px;
                    color: #cccccc;
                    content: "/\00a0";
                }

            .breadcrumb > .active
            {
                color: #999999;
            }
    </style>

Fyi, in HTML the Breadcrumb will be developed as following:

    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
    </ol>

A good question (not only for beginners). I am wondering about this still today. — Marcel, Apr 20 '16 at 12:15
To get rid of the spans, have a look at my answer for a similar question: http://stackoverflow.com/a/36761532/79485 — Marcel, Apr 21 '16 at 06:42

Jerreck · Accepted Answer · 2013-11-26T16:06:45.040

The easiest way to add a class to a server control is to add the CssClass="" parameter and specify what classes you want to add, like this:

    <asp:SiteMapPath 
        ID="SiteMap1"
        runat="server"
        PathSeparator=" > " 
        ParentLevelsDisplayed="1" 
        PathDirection="RootToCurrent" 
        RenderCurrentNodeAsLink="false" 
        ShowToolTips="true"
        CssClass="breadcrumb">
    </asp:SiteMapPath>

However, due to the way the SiteMapPath server control generates markup, you will need to do some additional modifications to your control, as well as to Bootstrap's breadcrumb class.

First, the SiteMapPath server control has a property called PathSeparator that allows you to specify what character separates links. If none is specified, it will use and angle bracket by default. Bootstrap's breadcrumb class uses a forward slash to separate links, so you need to change your PathSeparator property from PathSeparator=" > " to PathSeparator=" / ".

Next, you will have to create a Node template for the SiteMapPath server control. This will tell the SiteMapPath control what template each node should follow, and will allow us to tell it to make li's instead of just s:

    <asp:SiteMapPath 
        ID="SiteMap1"
        runat="server"
        PathSeparator=" / " 
        ParentLevelsDisplayed="1" 
        PathDirection="RootToCurrent" 
        RenderCurrentNodeAsLink="false" 
        ShowToolTips="true"
        CssClass="breadcrumb">
        <NodeTemplate>
            <li>
                <asp:HyperLink
                    id="lnkPage"
                    Text='<%# Eval("Title") %>'
                    NavigateUrl='<%# Eval("Url") %>'
                    ToolTip='<%# Eval("Description") %>'
                    Runat="server"
                 />
            </li>
        </NodeTemplate>
    </asp:SiteMapPath>

Finally, you will need to modify the breadcrumb class to include the SiteMapPath control's spans in its nesting:

            .breadcrumb > span > li
            {
                display: inline-block;
            }

            .breadcrumb > span > li > a:active
            {
                color: #999999;
            }

thanks for your help. However, I already tried your answer and it did not give me the right result. Would you kindly check? — Technology Lover, Nov 26 '13 at 14:55
Ah, I see. The markup generated by by the SiteMapPath server control doesn't match the CSS nesting for Bootstrap's breadcrumb class. You will have to rewrite the nesting. I'll update my answer to work with the markup I was given. — Jerreck, Nov 26 '13 at 15:19
Hey, You helped me a lot, however, there is no space above and bottom the breadcrumb right now. The original markup has space. I searched the web and I could not find any help. Also, I found someone here asking about the same thing. Could you please have a look at his concern as I am having the same one? [Here's the link](http://stackoverflow.com/questions/20909190/how-to-fix-this-sitemappath-to-work-properly-with-the-style-of-twitter-bootstrap) — Technology Lover, Jan 03 '14 at 17:53
How can I use this for my question: http://stackoverflow.com/questions/26892575/how-to-set-up-a-breadcrumb-in-an-asp-net-page — Si8, Nov 12 '14 at 18:11

score 3 · Answer 2 · answered Mar 06 '15 at 04:38

If you don't want to use javascript to remove the hyperlink from the current node, this is what I did:

<ol class="breadcrumb">
  <asp:SiteMapPath runat="server" 
      PathSeparator=" / "
      PathDirection="RootToCurrent"
      RenderCurrentNodeAsLink="false">

      <CurrentNodeStyle CssClass="active"></CurrentNodeStyle>
      <PathSeparatorStyle CssClass="path" />
  </asp:SiteMapPath>   
</ol>

Then I had to add in css for the spans to make it looks like Bootstrap's breadcrumbs. Those are just the colors I used, and I styled the path separator with some padding to match how Bootstrap did it.

.breadcrumb > span > span a { text-decoration: none; color: #00a9c6;}
.breadcrumb > span > span a:hover { text-decoration: underline;}

.breadcrumb > span > span.active { color: #777; }

.breadcrumb > span > span.path { color: #d1d1d1; padding: 0 5px;}

On another, simiar question I have proposed a solution to get rid of the excess spans. Have a look at http://stackoverflow.com/a/36761532/79485 — Marcel, Apr 21 '16 at 06:44

score 1 · Answer 3 · answered Jun 06 '14 at 10:49

Here's an alternative that worked for me.

<div class="breadcrumb">
    <asp:SiteMapPath ID="SiteMap1" 
        runat="server"
        PathSeparator=" / " 
        ParentLevelsDisplayed="1" 
        PathDirection="RootToCurrent"
        ShowToolTips="true">
        <CurrentNodeStyle CssClass="current-node"></CurrentNodeStyle>
        <NodeTemplate>
            <li>
                <asp:HyperLink
                    id="lnkPage"
                    Text='<%# Eval("Title") %>'
                    NavigateUrl='<%# Eval("Url") %>'
                    ToolTip='<%# Eval("Description") %>'
                    Runat="server"
                 />
            </li>
        </NodeTemplate>
    </asp:SiteMapPath>
</div>

and the css:

.breadcrumb > span > span > li
        {
            display: inline-block;
        }

This method allows the bootstrap floating elements to render inside the "breadcrumb" block.

Note: the NodeTemplate block overrides the RenderCurrentNodeAsLink="false" parameter because of the Hyperlink element. To overcome this, I used javascript to remove the hyperlink from the CurrentNode element via the class selector (notice the CurrentNodeStyle element).

Hope this helps.

How can I use this for my question: http://stackoverflow.com/questions/26892575/how-to-set-up-a-breadcrumb-in-an-asp-net-page — Si8, Nov 12 '14 at 18:10

Asier Arrondo · Answer 4 · 2017-06-07T09:05:48.967

0

More simple:

<div class="panel panel-default"> <div class="panel-heading"> <asp:SiteMapPath ID="SiteMapPath4" runat="server" SiteMapProvider="WebSiteMap" ParentLevelsDisplayed="3" PathSeparator=" / "> </asp:SiteMapPath> </div> </div>

asp.net twitter-bootstrap

edited Jun 07 '17 at 09:05

answered Jan 10 '17 at 15:16

Asier Arrondo

121
1
6

How to use Bootstrap style of BreadCrumb with my ASP.NET menu?

4 Answers4

Linked