Skip to content

The Breadcrumb in SharePoint 2010

October 31, 2011

The breadcrumb in SharePoint is useful just like the other navigation elements like the global navigation. In SharePoint 2010 we have the PopoutMenu control which can be visible if you click at the folder icon in the ribbon. That’s cool, but if you want to display the breadcrumb as a part of every pages without the need to activate it, it just to add a ASP:SiteMapPath control onto your custom masterpage.

SiteMap

There’s no limit when it comes to style the breadcrumb, you can have a custom background and an image that separates the nodes if you like to. In my example I have placed the following code just above the ContentPlaceHolder ‘PlaceHolderMain’ tag in my custom masterpage.

<div class="BreadCrumbWrap s4-notdlg">
<asp:SiteMapPath runat="server" SiteMapProvider="SPContentMapProvider" id="ContentMap"	CssClass="BreadCrumbStyle" PathSeparator="&gt;">
<CurrentNodeStyle CssClass="BreadCurrentNode" />
<PathSeparatorStyle CssClass="BreadPathSeparator" />	
</asp:SiteMapPath>
</div>

Add the following CSS classes to your custom CSS file, referenced from the custom masterpage.

CSS

.BreadCrumbWrap {
margin-top:10px;
}
.BreadCrumbStyle {
padding-left:15px;
font-size:10px;border-bottom:1px #ebebeb dotted;	
padding-bottom:5px;
}
.BreadCrumbStyle a:link, .BreadCrumbStyle a:visited {
color:#3b4f65;
}
.BreadCrumbStyle a:hover{
color:#0072bc; text-decoration:underline
}
.BreadCurrentNode {color:#0072bc}
.BreadPathSeparator{
color:#ccc; padding:0px 8px 0px 8px;
}

/ Christian

About these ads
16 Comments
  1. Andy permalink

    Hey Christian,

    I placed your bread crumb div right above in my master page. I found this bread crumb missing for the pages like Site Settings,All Site Content,Libraries, Lists ..etc (which are under “_layouts”). Any thoughts on this one ?

    Thanks

    • Andy permalink

      I think in my comment it took out div tag, What I was saying is, I placed your bread crumb div right above “s4-main area” div in my master page. I found this bread crumb missing for the pages like Site Settings,All Site Content,Libraries, Lists ..etc (which are under “_layouts”). Any thoughts on this one ?

  2. Hi Andy, if you add something into your custom master this should displays at pages in subsites that inherit this master even in application _layouts pages like settings.aspx by default. There’s a setting for this in Central Admin for the current web application called ‘Master Page Setting for Application _Layouts Pages’, make sure to select ‘Yes’ here.
    / C

  3. Andy permalink

    Hey Christian,

    Thanks for your reply. The setting that you mentioned was already selected as “Yes” but still for some reason bread crumb was missing for the application pages.

    But actually I solved the problem by replacing the sitemap provider tag with the following SiteMapProviders=”SPSiteMapProvider,SPXmlContentMapProvider”

  4. Brett permalink

    Thanks for this Christian, I’ve added your code to my master page because my breadcrumbs weren’t working and now it works great. Much appreciated. :)

  5. zula permalink

    I applied your code in my master page and when I’m connected with administrator profile it appears, however if I enter with a profile of contribute is no longer displayed.

    Can you help?

  6. Hello Zula, make sure the master page is published in a major version and approved if the settings say so. Make sure every reference file like external CSS and so on are published as well.

    • zula permalink

      Thanks. It works.

  7. Karel permalink

    Hi Christian,
    thank you very much for your solution, for me it works great!!! :-) :-)
    Thanks :-) :-)
    Karel

  8. AAragon permalink

    Awesome!! Works great! Thanks so much! Saved me tons of time!

  9. Maxim permalink

    Hi Christian, I have implemented your soulution and it works perfect!
    But is it possible to create breadcrumb that shows path from the very top site in the collection??
    Thanks

    • Maxim permalink

      Thanks Chris , but I have already found sollution simply by amending your chunk of code with the following SiteMapProviders=”SPSiteMapProvider,SPContentMapProvider” Now I have breadcrumb from the top level site!!!!

  10. Brian permalink

    Christian, your code works great. But after I put it into my master page, with referenced css file, I can’t add new folders or even new documents to the libarary, or any library or list for that matter. Do you know why??

  11. santu permalink

    hi Christian,
    Thanks for posting awesome stuff as always.
    This works perfectly fine in my master page, but when I open any web part pages which are in pages library, the breadcrumb is showing Site>Pages>webpartpage.
    Is there any we can hide the pages from the breadcrumb.
    I really appreciate your work.

Trackbacks & Pingbacks

  1. SharePoint Daily » Blog Archive » Do You Really Use SharePoint?; Enterprization of Consumer Apps; Mozilla & Microsoft vs. Google
  2. Do You Really Use SharePoint?; Enterprization of Consumer Apps; Mozilla & Microsoft vs. Google - SharePoint Daily - Bamboo Nation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,257 other followers

%d bloggers like this: