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>

Answer 1

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;
            }