Adding Breadcrumb Navigation to SharePoint 2010 Application Pages

The application pages in my SharePoint 2010 FBA Pack were not properly displaying the breadcrumb navigation. They didn’t include ‘Site Settings’ in the navigation – they went straight from Home to the application page.

FBA User Management Title Before Changes

I used the following blog entry to add the breadcrumb navigation:

http://weblogs.asp.net/jan/archive/2008/04/16/adding-breadcrumb-navigation-to-sharepoint-application-pages-the-easy-way.aspx

Unfortunately after making the changes, I still didn’t see a single change on the page.  I found a few other people on the forums wondering how to do breadcrumbs in SharePoint 2010, but nobody with a solution.  I decided to dig into the out of the box Site Settings application pages and see how they did it, as their breadcrumb navigation was displaying flawlessly, with the Site Settings as part of the navigation:

Site Columns Application Page Title

Looking at the Site Columns application page, mngfield.aspx, I realized the problems.  First, the SharePoint 2010 master page v4.master uses SPSiteMapProvider and SPContentMapProvider for the breadcrumb site map providers. These don’t build the breadcrumb from the layouts.sitemap file that define the breadcrumb in 2007.  The mngfield.aspx application page overrides v4.master and uses SPXmlContentMapProvider for the site map provider, which does read from the layouts.sitemap file. The second thing the out of the box application page does differently is override the PlaceHolderPageTitleInTitleArea content and hard codes the breadcrumb navigation. What I had mistaken for the bread crumb navigation was actually the title area.  The breadcrumb navigation in SharePoint 2010 is accessed with the ‘Navigate Up’ folder icon.

SharePoint 2010 Breadcrumb Control

SharePoint 2010 Title Area

So here are the steps required to get breadcrumb navigation working in SharePoint 2010:

SPFarm.Local.Services.GetValue<SPWebService>().
                    ApplyApplicationContentToLocalServer();
  • Add the following PlaceHolderTitleBreadcrumb section to your application page:
<asp:Content contentplaceholderid="PlaceHolderTitleBreadcrumb" runat="server">
  <SharePoint:UIVersionedContent UIVersion="3" runat="server"><ContentTemplate>
	<asp:SiteMapPath
		SiteMapProvider="SPXmlContentMapProvider"
		id="ContentMap"
		SkipLinkText=""
		NodeStyle-CssClass="ms-sitemapdirectional"
		RootNodeStyle-CssClass="s4-die"
		PathSeparator="&#160;&gt; "
		PathSeparatorStyle-CssClass = "s4-bcsep"
		runat="server" />
  </ContentTemplate></SharePoint:UIVersionedContent>
  <SharePoint:UIVersionedContent UIVersion="4" runat="server"><ContentTemplate>
	<SharePoint:ListSiteMapPath
		runat="server"
		SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider"
		RenderCurrentNodeAsLink="false"
		PathSeparator=""
		CssClass="s4-breadcrumb"
		NodeStyle-CssClass="s4-breadcrumbNode"
		CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"
		RootNodeStyle-CssClass="s4-breadcrumbRootNode"
		HideInteriorRootNodes="true"
		SkipLinkText="" />
  </ContentTemplate></SharePoint:UIVersionedContent>
</asp:Content>
  • Replace your PlaceHolderPageTitleInTitleArea section with the following:
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
	<a href="settings.aspx"><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,settings_pagetitle%>" EncodeMethod="HtmlEncode"/></a>&#32;<SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />
	My Application Page Title
</asp:Content>

After those changes my application pages display as they should, with the proper breadcrumb navigation:

FBA User Management Title Area After

FBA User Management Breadcrumbs After

Comments

4 responses to “Adding Breadcrumb Navigation to SharePoint 2010 Application Pages”

  1. timothy eichfeld Avatar
    timothy eichfeld

    Hello,
    None of this worked for me, actually, it broke a few things. I am new to Sharepoint and do not have innate knowledge to know where you skipped a few steps. Is there a resource available (or do you have any step by step instructions) on how to setup a simple hello world application page with a breadcrumb? I do not have a 12 hive in Sharepoint 2010 (actually none exists) it is a 14 hive, so maybe I have a different version? Placing these in the 14 hive does not solve my problem.

    If you could help point me in the correct direction, that would be great.

    Thanks much,
    -TImothy

    1. Chris Coulson Avatar

      You’re right – the instructions I link to are for SharePoint 2007 – so they point to the 12 hive. You need to use the 14 hive in SharePoint 2010.

      I don’t know of a resource with a simple hello world application page with a breadcrumb. If you want to take a look at working code, download the code for the SharePoint 2010 FBA Pack. That’s where this example came from. The pages under Layouts\FBA\Management have this implemented.

      http://sharepoint2010fba.codeplex.com/

  2. Shankar Avatar
    Shankar

    Chris: This is awesome.I just replaced the “” in my default.aspx page(SharePoint 2010) with your code and it worked as you said.Thank you so much.

  3. Nicolas Avatar
    Nicolas

    I add the following code to my master page, and worked like a charm in my SP2010:

    Source: http://www.neilrichards.net/sharepoint2010/fixing-the-sharepoint-2010-breadcrumb

Leave a Reply to Chris Coulson Cancel reply

Your email address will not be published. Required fields are marked *