Skip to content

A Better SharePoint 2010 Breadcrumb – Chaining Controls in the Master Page

by on March 21, 2012

The goal is something like the below, where you get both a link to the current location and the full breadcrumb chain, as well as the new 2010 dropdown functionality. IE – the best of both worlds.image

The moving parts

This breadcrumb is made up of a few different items.

 

The old school breadcrumb from SiteMapPath with some specific property settingsimage

A divider with the same information as that used on the SiteMapPath breadcrumb

image

The new SharePoint 2010 “breadcrumb” called PlaceHolderPageTitleInTitleArea and it’s accompanying dropdown functionality (particularly useful on list and library pages for quick access to views, etc.

image 

The Code

Open the master page in SharePoint Designer to edit the breadcrumb

Set RenderCurrentNodeAsLink and set parent levels if desired (-1 is all levels and is default, but may not be practical for large site collections)

<asp:SiteMapPath runat="server" PathSeparatorStyle-CssClass="breadcrumbdivider" PathSeparator=" " ParentLevelsDisplayed="-1" RenderCurrentNodeAsLink="true"/>

Use the same divider specified in the SiteMapPath above (I just styled the size and background image in css – clean and easy)

<span class="breadcrumbdivider"></span>

Use the PlaceHolderPageTitleInTitleArea as the tail of the breadcrumb (you may want to use css to override the look of the right arrow to match you custom divider)

<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />

NOTE: You can use PlaceHolderPageTitleInTitleArea only once each in a master page! If you need to use more than once, changing the ID to be unique does not work, as it will still only render once!

Enjoy your new breadcrumb chimera!

Advertisements
4 Comments
  1. Hi, Thanks for this!!
    I am quite new at sharepoint branding and I’m trynig to change the breadcumb to have instead of the right arrow, something like this “>” (an image).
    But I dont really understood if I should write everything you did…

    Right now I have this:

    And the div gets the whole css styling. It doesn’t work…

    Can you please help me?

  2. You will need developer toolbar (F12) and a really good grasp of CSS to change the breadcrumb image.

  3. Hi Emerson,
    Great post – I can add the control, and get everything working except the breadcrumb dividers as path separators within the bread crumb – just get blanks – I can add > but wanted to match what you have. I can manually add the ” based divider so the image and css does exist within our farm…

    At a bit of a loss – so wondering if you knew of any gotchas?

    cheers

    • I just used css to override the look and feel of the arrow – basically it is an image in the background and the divider is just a blank placeholder to give the background image space to appear.

      CSS is fun – I never like design to be reliant on code if possible. This allows you to quickly make changes without opening the master page.

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

%d bloggers like this: