Breadcrumbs in Layouts pages are driven by an XML file in your IIS web app. Now, you can add entries which are merged into that – a described by Jan Tielens’ Adding Breadcrumb to application pages in SharePoint – the easy way. However, this doesn’t cover the whole problem – he goes on to describe dealing with Central Admin too.

However, the really tricky bit of this that though we can define our own sitemap.xml file, it’s kind of hard to merge with the existing one. Specifically, the problem is that to merge ‘our additions’ and the ‘existing file’, we have to call a function ApplyApplicationContentToLocalServer, and as brilliantly described by Sean McDonough, the word ‘local’ is a problem in this method – it only forces a merge of the files on one server. Not much use in a server farm.

Sean’s article describes his attempt at a fix – using a one-time timer job, and a fair bit of reverse engineering of the ApplyApplicationContentToLocalServer function. Also, it seems like Vince Rothwell has come up with a similar solution, so it’s likely that this is a good approach.

A real pain to have to build so much to do such a simple task, though.

You can make a Title column not required:

Also, if you go to the ‘Advanced Settings’ page of your list and ‘Allow management of Content Types’ you can then go into your content types and Hide the Title column. This is okay – but the Title column is still there – it’s just being displayed with “(no title)”…

That’s not such a problem for views on a list – you can simply choose to not show the Title column. But unfortunately, some other pages (such as EditForm.aspx and DispForm.aspx) use the Title column in their title and navigation:

“(no title)” sucks a bit, especially as we probably do have something better to use as a title. I decided to use jQuery to replace the “(no title)”s in the Edit and Display forms:

Or, as text:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
var user = $("span[class='ms-entity-resolved'] > span[id='content']");
var userText = user.text();
document.title = "Users - " + userText;
var pageTitle = $("h2[class='ms-pagetitle']");
var pageTitleHtml = pageTitle.html();
pageTitle.html(pageTitleHtml.replace("(no title)",userText));
var pageLink = $("td[class='ms-titlearea']");
var pageLinkHtml = pageLink.html();
pageLink.html(pageLinkHtml.replace("(no title)",userText));
});
</script>

Here I’m getting the new title from my user field – but you might want to use another field. Whatever, the same principle of using jQuery to get the value would work.

Then I update the Browser’s title bar with the new title.

Next, I select the page title and replace “(no title)” with my new title, before writing the html back, and finally I repeat this with the “(no title)” link in the breadcrumb. The end result is:

Nice. I repeated this for my Dispform.aspx too, though not the new Item form – it doesn’t display the title at all (as a new item doesn’t have one yet!) I also added an edit button to my list so that users can still edit these items:

(And yes, there are other ways of dealing with this – building  proper custom edit and display forms, for example – but this is quite low effort)

However, sometimes we don’t have that luxury (i.e. I’ve never had that option) – so what do those crazy out-of-the-box page layouts do with their breadcrumbs? Well, Martijn Molegraaf has been kind enough to provide a chart. Nice one. And I feel your pain.

• If I create a new page layout in SharePoint, how do I get rid of the breadcrumbs?
• How can I get breadcrumbs, but like the home page?

Here’s how…

Some page layouts don’t have space above the main content for a title, or for breadcrumbs.

By contrast, a lot of other pages do:

So what happens when we create a new page layout in SharePoint Designer? Well, they have breadcrumbs, and room for a title:

So, how do I fix that? Well, go back to SharePoint Designer (you just created the page layout with it, right?) Let’s look at the code:

Right, pretty straight forward – some content controls overriding the master page’s content placeholders. I’m assuming that you’re familiar with Master Pages in ASP.NET. Now, we can get rid of the breadcrumbs, title and the page image (which is sometimes shown on the left) by overriding those content controls. Paste this code into your page:

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" />
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server"><IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt=""></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server"/>

What we’re doing there is setting those to empty content (or, for the Page image, an invisible 1 pixel image. No, I don’t know why, but that seems to be how SharePoint always does it)

Fine, what does this give?

No breadcrumbs or title, but still a big gap. How do we get rid of that? Well, we can use CSS to shrink the gap. This CSS is inserted into the PlaceHolderAdditionalPageHead

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<style>
TD.ms-titleareaframe, .ms-pagetitleareaframe { height: 10px; }
Div.ms-titleareaframe { height: 100%;}
.ms-pagetitleareaframe table { background: none; height: 10px; }
</style>
</asp:Content>

This CSS gets inserted in the header, and it’s just setting the height of that region to 10 pixels or so. Now we get:

Hmm. Nearly there – but the border isn’t right. There should be a 1pixel blue border at the top and left of the main content area. How does SharePoint normally do that?

Well, it cheats. The blue border comes from a table that is put into the main content area, and is set to fill the content area. For an example, put this code into your main content area:

<table style="padding-top:0px;" border="0" cellpadding="0" cellspacing="0" ID="OuterZoneTable" width="100%">
<tr>
<td>
Test Content
</td>
</tr>
</table>

It shows:

Now you can change this table to show the content you want!

What if I want the breadcrumb in the main content area? Sort of like the home page to a collaboration site? Or even a team site?

Well, there are a couple of more steps. First off, replace the text you just put into your main content area with this:

<table style="padding-top:0px;" border="0" cellpadding="0" cellspacing="0" ID="OuterZoneTable" width="100%">
<tr>
<td class="ms-pagebreadcrumb">
<asp:SiteMapPath ID="ContentMap" Runat="server" SiteMapProvider="CurrentNavSiteMapProviderNoEncode" RenderCurrentNodeAsLink="false" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional"/>
</td>
</tr>
<tr>
<td>
Test Content
</td>
</tr>
</table>

This will show:

Nearly, but not quite. The breadcrumb is there, and styled right, but it is padded in from the edge of the page.

To get rid of the padding, we have to insert CSS content into another content placeholder. Add this to your page:

<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe { padding: 0px; }
</style>
</asp:Content>

And this produces:

A completed page, with the breadcrumb in the main content area, and no title breadcrumb or title. Sure, I’ll have to build some padding into the table in my main content area, but this is simple HTML, and I’ll leave for the reader to figure out.

I am trying to limit the depth of the breadcrumbs. I have a sub sub sub subsite that I want breadcrumbs to show from that site and down one more level. I can make the breadcrumbs invisible using SPD but I wonder if I can make them limited … like we could in WSS 2. - Jo Arnspiger

Well, there are a couple of ways that spring to mind (there are many approaches, but these are probably the best two) – one that uses SharePoint Designer, and one that uses SharePoint’s own navigation configuration.

First off, let’s look at the SharePoint Designer route. If you go to your master page or page layout, you’ll see an ASP control called the SiteMapPath control. It has a property called ParentLevelsDisplayed.

Set that to a number, and that should be the maximum number of levels shown. If you set it to -1, it will show however many levels there are, which is it’s default. (I’ve not tried it, but I’m pretty sure that’s the case). That’s probably what you want, but there is a problem – it’s not just your master page which defines the SiteMapPath control. There is one on most of the Publishing Page layouts that come out of the box too. Still, if you’re happy taking a little time to change all of them, then that’s probably fine.

The other problem is a little more fundamental – this setting will apply across your entire site collection. Well, okay, maybe not, but it’ll apply for all pages using that master page or page layouts…

Alternatively, you could change the Site’s navigation settings to get what you want. At the ‘sub sub sub subsite‘ you could change the site’s navigation setting to not inherit it’s top navigation settings from the parent site. This will add a level to the ‘Global Navigation’ breadcrumb, but also make all URLs below the ‘sub sub sub subsite‘ start at that level. See my previous article for an explanation.

The down side about this approach, though, is that it means all of your top navigation tabs will change – you really are breaking with the ‘navigation context’ of the parent site. (That’s my term – I didn’t know what else to call it.) There is an example of this on the article linked to above.

A final note, these approaches do have two slightly different results – the first route is a ‘only show the last X items’, while the second is ‘chop all breadcrumbs below this site to start here’.

Anyway Jo, I hope that one of those is suitable.

(Yes, this screenshot shows some other settings – they’re mentioned in the other articles)

Looking at the screenshot we can see how the Path Separator setting allows us to set what we want shown between nodes – rather than ” > ” I’ve used “:”. Not sure when/why you’d want to change that, but I’m sure I’ll be given a design where that is useful sometime!

There’s also the Path Direction setting, which allows us to set whether the breadcrumb should have the current node on the left or right of the breadcrumb – hence the two settings, RootToCurrent and CurrentToRoot. Note, though, that the default path separator doesn’t swap from ” > ” to ” < “.

There are a number of settings you can use with the ASP:SiteMapPath control. One is the RenderCurrentLink option. This defines whether the current location indicator in the breadcrumb should be shown as a link.

(Yes, this screenshot shows other settings – I’ll discuss them in other posts)

Looking at the top 4 rows you can see the effect of the the RenderCurrentLink option – it determines whether the last item is displayed as a link or not.

ASP.NET navigation controls take data from a navigation provider, and render it into HTML. The breadcrumbs used in SharePoint use the one navigation control, but give it different navigation providers…

… the point relevant to whether or not the “> Pages > default.aspx” is displayed in the breadcrumbs is the SiteMapProvider. The CurrentNavSiteMapProviderNoEncode provider doesn’t seem to include the ‘Pages’ bit of the path – hence it is used by the page layouts. The Default.master’s SPContentMapProvider provides a breadcrumb that includes the ‘Pages’.

So, if your page is using a breadcrumb such as…

<asp:SiteMapPath id="ContentMap" SiteMapProvider="SPContentMapProvider" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>

… then your breadcrumb will include the “> Pages > default.aspx”. Note that this is the default content of the breadcrumb in default.master. Thus, if you’re creating a brand new page layout, you’ll probably want to override that content using an ASP.NET Content control something like this…

<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server">

<asp:SiteMapPath ID="siteMapPath" SiteMapProvider="CurrentNavSiteMapProviderNoEncode" RenderCurrentNodeAsLink="false" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" Runat="server"/>

</asp:Content>

This code defines a content control that overrides the default content for the Title Breadcrumb. It uses the CurrentNavSiteMapProviderNoEncode (nice name!) navigation provider, and so won’t show the “> Pages > default.aspx” bit in the breadcrumb.

So, in short, when you’re creating a new Page Layout, make sure you override the Title Breadcrumb with something that uses the CurrentNavSiteMapProviderNoEncode provider.

This is pretty interesting. Breadcrumbs should be pretty simple. I mean, we all use them on the web, probably every day, and often without noticing. So how come people are clearly looking up information about SharePoint breadcrumbs? Clearly something is wrong with them.

So this set me thinking – what’s wrong with them? And here’s what I could think of:

• There are two breadcrumbs. You’ve got the Global breadcrumb, and then the PlaceholderTitle breadcrumb. Seriously, how many websites do you come across that have two?
  
• ‘Site’ levels of the hierarchy can appear in one or the other breadcrumb. Depending on whether or not your navigation inherits it’s navigation from it’s parent site, the ‘Site’ links can appear in the global or title breadcrumbs. Thus, there’s no consistency as to where a site appears – if it appears at all! I can see why it’s been built this way – essentially it allows us to ’skip’ levels in the site hierarchy as shown on the global breadcrumb, and it shortens the title breadcrumb. I wonder if this wouldn’t be better facilitated by a ’show in Global breadcrumb’ site setting. Or just show all sites in the path to the site?
• Why is what is shown in the breadcrumbs tied to what is shown in the site’s top navigation? That’s just confusing.
• Having some breadcrumbs in the Page Layout (i.e. in the main content area) and others coming from the master page is just plain confusing.

I don’t quite know what the answer to this is; after all, we need a way to navigate back up the site hierarchy, though we might not always want to allow that. And breadcrumbs could get very long, so yes, maybe we want to skip levels. But I think I’d be tempted by showing all sites in the Global navigation. This would also divorce the breadcrumb from the top navigation settings, and I think would be easier.

And if the Global navigation gets too long? Well, that seems quite possible. In that case, how about a setting on each site to ‘Display in Menu in the Breadcrumb’ to give something like this:

This way you can still have your ‘Main’ sites in the hierarchy, but all levels are still available. Of course, you might want to make it that all the subsites of last ‘Main’ site are always visible irrespective of that setting. I think that would work, and would require less getting used to.

It’s a bit like the Vista breadcrumb in Windows Explorer – but a bit different, which might count against it…

That said, I’m open to thoughts from others! Comment if you’ve got an idea of how breadcrumbs should work!

One of our customers was building a page layout, and wanted the breadcrumbs inside the Main content area. They put the following content controls into the page layout file:

<%-- This content tag blanks the 'title' placeholder, which is above the white 'main content area' of a page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" />

<%-- This content tag blanks the 'title breadcrumbs' placeholder, which is above the white 'main content area' of a page --%>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server"/>

<%-- This is the main content for a page. This content tag is an example only.
Usually there is more formatting and web part zones, other controls, etc.--%>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<!-- This tag defines the breadcrumb to display. On a normal page (such as defaultlayout.aspx) it is a contained within a table -->
<asp:SiteMapPath ID="ContentMap" Runat="server" SiteMapProvider="CurrentNavSiteMapProviderNoEncode" RenderCurrentNodeAsLink="false" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional"/>

<!-- This tag displays the text of the page's 'Title' that is given when it is created. -->
<SharePoint:FieldValue id="PageTitle" FieldName="Title" runat="server"/>

</asp:Content>

Unfortunately, this resulted in a gap between the top of the page content area, and the bottom of the top navigation:

So, what was missing?

Well, it turns out that another couple of content controls are relevant:

<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server"><IMG src="/_layouts/images/blank.gif" width=1 height=1 alt=""></asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<style>
TD.ms-titleareaframe, .ms-pagetitleareaframe {
height: 10px;
}
Div.ms-titleareaframe {
height: 100%;
}
.ms-pagetitleareaframe table {
background: none;
height: 10px;
}
</style>
</asp:Content>

The first content tag blanks the ‘page icon’ placeholder, which is above and to the left the white ‘main content area’ of a page. It is set to show a 1 pixel transparent image, and it appears that this is to maintain page structure, where setting the content to nothing might allow the table cell to collapse. And I thought that 1 pixel transparent gifs were so 1992.

The second content tag reduces the space available for the ‘page title area’ through CSS. It overrides some of the styles to do this. Of course, this relies on your master page using those styles, or having that structure – so if you’re planning on creating a custom master page, you’d better think of all custom page layouts too. I’m not really convinced about that as design – it seems to me that this makes creating a new, radically different master page even harder, as the page layouts must be rebuilt too.

Well, it transpires that I was wrong. What I’ve described is true for some page layouts… and not for others. The Default Master page defines its PlaceHolderTitleBreadcrumb ContentPlaceHolder control as:

<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>
</asp:ContentPlaceHolder>

This is defining the default breadcrumb on the master page.

For the DefaultLayout.aspx layout page, it defines the content for the page to have:

<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server"/>

That will empty the placeholder on the master page, so no breadcrumb will appear in the usual location – in fact, nothing will. (Note: you will probably want to reduce the blank space that the breadcrumb occupied – otherwise you’ll have a bit gap above your main content area). It then goes on to define (in the PlaceHolderMain Content control):

<td class="ms-pagebreadcrumb" colspan="2">
<asp:SiteMapPath ID="ContentMap" Runat="server" SiteMapProvider="CurrentNavSiteMapProviderNoEncode" RenderCurrentNodeAsLink="false" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional"/></td>
</tr>

There we can see the breadcrumb that appears in the page content.

However, if we look at a different page layout, such as BlankWebPartPage.aspx, we see:

<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server">

<div class="breadcrumb">
<asp:SiteMapPath ID="siteMapPath" Runat="server" SiteMapProvider="CurrentNavSiteMapProviderNoEncode" RenderCurrentNodeAsLink="false" SkipLinkText="" CurrentNodeStyle-CssClass="breadcrumbCurrent" NodeStyle-CssClass="ms-sitemapdirectional"/>

</div>

</asp:Content>

Okay, interesting. So, what’s different about the breadcrumbs? Well, a few things, but the point relevant to whether or not the “> Pages > default.aspx” is displayed in the breadcrumbs – the SiteMapProvider. The CurrentNavSiteMapProviderNoEncode provider doesn’t seem to include the ‘Pages’ bit of the path – hence it is used by the page layouts. The Default.master’s SPContentMapProvider provides a breadcrumb that includes the ‘Pages’.

It is a bit mystifying why some page layouts blank the PlaceHolderTitleBreadcrumb while other override it – it would have been really nice if they worked consistently. And, as a side note, if you create a page layout and find that your breadcrumbs include the “> Pages > default.aspx” bit, then 1) make sure you’re providing content to override the PlaceHolderTitleBreadcrumb, and 2) make sure that it uses the CurrentNavSiteMapProviderNoEncode navigation provider.

You can see them here at the top left, and then above the word ‘Documents’. But wait, the master page shows us two breadcrumbs? You’re only in one hierarchy, so how does that work? The Planning & Architecture documentation on Technet says:

The default.master master page, which displays form and view pages, includes two breadcrumb controls, a global breadcrumb which contains sites only, and a content breadcrumb, which contains sites and the current page. Some collaboration site templates, such as the Team Site template, also include two breadcrumbs on all Web pages

However, this isn’t quite the complete story.

I found myself looking at navigation similar to this:

So, I’m in a document library, in a subsite called ‘Parent Nav’. The ‘global’ breadcrumbs still just shows the top site though, and the ‘content’ breadcrumbs has 2 sites in its links. This left me more than a little confused – what the heck made a site appear on the top breadcrumbs or the bottom one?

Well, the names in my site give you a clue as to what is different about where the site ends up being shown – whether it inherits the parent site’s navigation, or whether is has its own. This is set during site creation:

Or from the Site Settings page. What you see then, though, depends on whether you’re using the publishing features or not:

or

If you select that you don’t want to use the parent’s links, then it’s like you’re breaking out of the ‘navigational context’ of the parent. The ‘Content Breadcrumbs’ (or ‘Title Breadcrumbs’) (the things that go in the PlaceHolderTitleBreadcrumb placeholder in the master page) only start from this context, so they are shorter. However, the ‘Global Breadcrumbs’ now show both the parent ‘context’ and the current site. This is shown below, where both sites are at the same level. The bottom image does not inherit the parent’s navigation:

Now, the observant will have noticed that I talk about ‘contexts’ rather than sites. That’s because I tried a hierarchy of sites 4 deep – lets call it A > B > C > D. I made B and D use their own navigation (i.e. not inherit their parent’s). This meant that C would inherit from B. If we view the bottom site, D, what would be shown in the navigation? Would the global breadcrumb contain “A > B > C > D“, or “A > B > D“?

Well, it turned out to be the latter. It appears that the SPSiteMapProvider (which supplies the entries for the global breadcrumbs) provides a trail of the sites up the hierarchy which use their own navigation. The SPContentMapProvider (which supplies the ‘Title Breadcrumbs’), provides a trail of the sites up the hierarchy which do inherit from the parent.

Thus, confusingly you can end up with sites in each of the two breadcrumbs. However, this does hav the advantage that, with deep hierarchies, you can kind of ‘hide’ some of the intermediate layers, as we did with “C” in our test above.

An Added Complexity – Page’s own Breadcrumbs

So, we’ve talked about the 2 breadcrumbs typically found on the master page. There is another one, of course, just to make life confusing. This is actually found in some of the content pages themselves, rather than in the master page. In the screenshot below, everything below and right of the red line is page content, not part of the master page.

Okay, so what’s going on there? Well, first off, the page is defining empty content for the ‘PlaceHolderTitleBreadcrumb‘. In Master pages there are content placeholders, and these can have default content. Pages themselves can defined content for that placeholder, and this overrides the content that was there. That’s what is happening here, and this is making our default content – the breadcrumb – disappear from our page. Then, it is defining it’s own breadcrumb within it’s own content. Lots of pages do this – the home page of your collaboration site does. But why does it need it’s own breadcrumb?

Well, to find out, I hacked one of the pages so it always displayed the Title Breadcrumb. The first thing I noticed on going to the home page of my root site was that the breadcrumb read “Site > Pages > Default.aspx“. Technically that is correct, that is the page being shown, but it doesn’t really match up with the URL for the page and I could see that it would confuse users. Every time they clicked for the home page they are given a page which appears to be two ‘levels down’.

What I don’t understand, though, is why the page doesn’t just override the normal ‘Title Breadcrumb’ with its own. I mean, it could. Instead, though, we have the Title Breadcrumb being overridden with ‘nothing’ so it doesn’t display, and then another navigation control! I don’t know what that’s about…

Except if you go the search page. Then, the search box is shown in the breadcrumb placeholder. WTF! Who the hell designed that? I mean, what idiot decided to put a large control, with LOTS of padding (discussed wonderfully by Heather Solomon).

Speaking of padding – that padding is hard coded into the control. It is fucking CSS, but they put it into the control. Nobody would ever want to get rid of that 50px padding above this control, right? Nobody would have designed space for the nice little breadcrumbs only to be caught out when the stonking search control sticks it’s flabby ass there, right?

Wrong. I’ve been caught, and I’m not the only one. As Tom says, the solution isn’t complicated – but I shouldn’t have to solve it. He’s right when he discusses the ‘contract’ of the master page. This design bug is just wrong.

And I don’t believe that I should have to write my own delegate controls all the time ‘cos someone was too lazy to write theirs in a generic way. I mean, this is supposed to be the office platform. Don’t hardcode styles into your delegate controls, don’t assume your control will be in a table row, and, in fact, could we stop using tables so we might make an accessible system? It’s kind of important in many countries…