Convert Folder Breadcrumb to Traditional Style

Update 11/4/2010: I found that by using the default SiteMapProviders="SPContentMapProvider" in the original post it was throwing errors when creating a publishing page.

So I have updated my approach below to utilize how breadcrumbs were done in MOSS 2007.

Basically you should simply replace the existing PlaceHolderTitleBreadcrumb placeholder with the following:

<div class="custom-breadcrumb">
    <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
        <asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" runat="server"/>
    </asp:ContentPlaceHolder>   
</div>

I have updated the post below to reflect the above changes.

I have received a lot of feedback about the OOTB breadcrumb control for SharePoint 2010 not being useful and hard to find. People would ask me: Where did the standard breadcrumb go? I know it was there in SharePoint 2007… Well to find it in 2010 you have to look hard (Which in my opinion is not a good thing). To find it. look in the ribbon for that little folder icon with the green arrow that is next to the site actions…

If you click on it, it will display a pop up menu with a hierarchy from the top of that site collection.

So to get the 2007 breadcrumb look and feel back you have to do some simple configurations.

First open up your custom master page and search for: “PlaceHolderGlobalNavigation”

Within this control there is another place holder called “PlaceHolderTitleBreadcrumb”

Simply delete the “PlaceHolderGlobalNavigation” Code and add in the following simplified code right above the “s4-mainarea” DIV.

<div class="custom-breadcrumb">
    <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
        <asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" runat="server"/>
    </asp:ContentPlaceHolder>   
</div>

The result should look like this: A bunch of Span and <a> tags.

Now it is time to add in CSS to make it look more like a traditional breadcrumb. Add in the following CSS to your global CSS file or master page:

<style>
.custom-breadcrumb{
padding:5px 0px 5px 5px;
font-family: Arial sans-serif;
font-size:8pt;
font-weight: normal;
background-color: #EEE;
border-bottom: 1px #CCC solid;
}
</style>

The breadcrumb should now look something like this:

You can download the sample master page HERE with the updated code above to get you started.

Enjoy!

Sorry for the changes, but I am sure you will enjoy this better without the errors!