Skip to main content

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.
image
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…
image
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

image

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.
image

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:

image

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!

Comments

Anonymous said…
Hi

Your article help me out lot,i have Followed the same steps mentioned by you in article, however i am not getting PathSeperator for Site Setting pages
Thanks for your Help so far.

Any kind of help will be appreciated.

Regards
Sachin
Anonymous said…
I was just getting ready to dig into this. You have saved me! Thank you for posting.

Jason
Anonymous said…
Thank you, this was just wanted I wanted to do. Keep up the awesome posts!
Erik Swenson said…
I updated the post with a better approach for adding a traditional breadcrumb in SharePoint 2010. Please review the changes and update as needed. I also updated the supplied starter master page at the end of the post.
Patrick Sledz said…
Hi Erik,

Nice post.
I am still wondering why MSFT implemented the breadcrump like this by default in SP2010?
Will try this 'workaround' in a few days :-)
Anonymous said…
I have tryed doing this method and had one problem. It worked for all of my pages except for the site setting page. The breadcrumb is in the new spot but it seems like the styles we applied are being overridden by the styles the sitemap had when it was in the folder you had to click on. Any suggestions?
Jasmine said…
Hi, great post. I've followed the steps above, but I get the same issue as Anonymous. The breadcrumb in site setting pages doesn't seem to follow the new design. It uses the same design as before (in the folder you had to click on). How can I make the breadcrumb look the same on all pages? :)

Regards,
Jasmine
Hippiechos said…
Awesome, wonderful, helpful!

As said in other comments, I found that I had the same problem with the drop down look on pages and settings. I simply put the
outside of the ContentPlaceHolder, and then hid the ContentPlaceHolder (since you can't delete it without getting errors).

Thank you for the wonderful blog!
Hippiechos said…
Looks like the asp tag got taken out. My comment was supposed to say

asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" runat="server"

with the open and close marks
mr said…
Thank you! This helped get breadcrumb working. I have another issue, When i add portal site connection it is not added to breadcrumb is there a way to do so?
Anonymous said…
The SiteMapProvider would bring over the child nodes like default.aspx, I would change that part see http://geekswithblogs.net/leonardm/archive/2012/02/10/traditional-breadcrumb-in-sharepoint.aspx
Anonymous said…
Hi Erik I was searching for this kind of article.
I am facing same problem regarding Custom Breadcrumb...
I put in ur given code..but then also their no change in breadcrumb ...
So is their any other way to do it
Anonymous said…
Hi Erik I was searching for this kind of article.
I am facing same problem regarding Custom Breadcrumb...
I put in ur given code..but then also their no change in breadcrumb ...
So is their any other way to do it
Anonymous said…
hi,

its not show proper navigation breadcrumb in publishing page. something like folllowing. Apprieciate your guides. Thank you

Regards
Kuik Sok Ping
Steven Nell said…
Nice, worked for me in under 10 mins of work. Thanks a million
Steven Nell said…
Nice, worked for me in under 10 mins of work. Thanks a million
Steven Nell said…
Nice, worked for me in under 10 mins of work. Thanks a million
sebastian greco said…
Thanks, you save my day. Easy and simply.

Popular posts from this blog

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…