Create SharePoint breadcrumbs with Mavention Simple SiteMapPath
Accessibility, SharePoint 2010, WCM, Web standardsOne of the challenges while developing Internet-facing websites built on the SharePoint platform was rendering semantic breadcrumbs. Out of the box Office SharePoint Server 2007 was using for that purpose the ASP.NET SiteMapPath control. And while it looked okay visually, internally the whole control was rendered as non-semantic spans. SharePoint 2010 ships with a new control for rendering breadcrumbs called ListSiteMapPath. And while this control uses semantic markup and renders the breadcrumbs as an unordered list, the markup is too complex if all that you need is a simple list with some links. In such situation the Mavention Simple SiteMapPath can become very useful.
Breadcrumbs the way we knew them
The breadcrumbs control that we know from the Blue Band branding that shipped together with Office SharePoint Server 2007, is still available with SharePoint 2010. Not only it’s there for backwards compatibility purposes but it’s also being used by the sample Publishing Site provided with SharePoint Server 2010. If you look at the rendered markup you will see a bunch of span’s.
Why is this exactly an issue? For two reasons using the sample breadcrumbs code as included in the nightandday.master Master Page is bad. First of all it renders a bunch of span’s which have no semantic meaning. So if the visitor is visually challenged and uses a text browser all he sees is a just one chain of words.
Secondly the standard markup is difficult to brand. If you work with web designers who translate the branding from drawings to (X)HTML I bet not even one of them would describe a breadcrumb as span’s. That means that you would either have to modify the HTML+CSS to brand the span’s or create a custom branding control that would render the markup as provided by the web designers.
While the SiteMapPath control supports templates, which might seem the way to overcome this problem, they really aren’t. First of all using ASP.NET binding templates (<%# %>) with SharePoint Page Layouts is only allowed as long as the Page Layouts remain uncustomized. As soon as you customize it, you will get an exception stating that inline code is not allowed.
Secondly the templates only apply to nodes. So while you could turn all nodes into list items (<li>) the root element of the control will still be a span. Subclassing the SiteMapPath would allow you to override the root tag, but then you would still have to solve the first issue with the nodes being rendered as span’s.
Breadcrumbs the 2010 way
SharePoint 2010 uses two types of breadcrumbs. First of all we have the old fashioned breadcrumbs that are visible as a path. These are the breadcrumbs that we all know. Additionally a new type of breadcrumbs has been introduced: the hierarchical breadcrumbs which show where in the hierarchy of the current site you are.
These breadcrumbs are being rendered using the new ListSiteMapPath control that ships with SharePoint Foundation 2010. The great thing about this control is that it not only renders the breadcrumbs as an unordered list, but it also does that in a hierarchical manner. Let’s have a look at the rendered markup.
Each level of the breadcrumb is represented as a separate list nested in the parent level. Although not very popular, this is probably the best way to describe the current location on the web site in HTML.
While the ListSiteMapPath produces semantic markup it lacks one thing that makes it less useful for custom brandings than we would like. One thing that you cannot really do with it is to control the rendered HTML. They way the nodes are being rendered is hard-coded in the control. So if you for example would like to get rid of the images or simplify the markup by removing some of the CSS classes, you can’t. It just isn’t there.
This is where the Mavention Simple SiteMapPath becomes useful.
Mavention Simple SiteMapPath
Mavention Simple SiteMapPath is a custom control that derives from the ASP.NET SiteMapPath control. What it does is, it renders breadcrumb as a single level unordered list – probably the most commonly used markup for describing breadcrumbs:
Getting it to work is simple. The control is shipped as a SharePoint 2010 Farm Solution package (WSP). After the deployment the assembly is being provisioned to the WebApplication’s bin directory together with the CAS policies required to run the code.
After the deployment you have to register the control with your Master Page or Page Layout:
<%@ Register TagPrefix="Mavention" Namespace="Mavention.SharePoint.Controls.SimpleSiteMapPath" Assembly="MaventionSimpleSiteMapPath, Version=1.0.0.0, Culture=neutral, PublicKeyToken=3fea3f4d0c0e939b" %>
And then you have to add the control itself:
<Mavention:SimpleSiteMapPath CssClass="breadcrumbs" runat="server" RenderCurrentNodeAsLink="false" UseSimpleRendering="true" PathSeparator="" SkipLinkText=""/>
Please note the UseSimpleRendering attribute set to true. Thanks to this attribute the breadcrumbs are being rendered as an unordered list and not a bunch of span’s. Additionally you can set the PathSeparator and SkipLinkText attributes to keep only the list without any other markup.
Download: Mavention Simple SiteMapPath from CodePlex (5KB, WSP)
April 11th, 2010 at 8:56 am
Mate, seriously you keep smashing them out of the park! This was yet another request with WCM I'm getting ;-) Thank You!
April 11th, 2010 at 8:56 am
Mate, seriously you keep smashing them out of the park! This was yet another request with WCM I\'m getting ;-) Thank You!
April 11th, 2010 at 9:04 am
@Jeremy: You're welcome :D Enjoy :D
August 24th, 2010 at 9:20 am
Hello,
I just put a question about BreadCrumbs on StackOverflow and got a link to your site.
I've been trying all the time to deploy the mavention-simplesitemappath to "my" site but I just can't get it work.
A bit more detailed explenation of this paragraph "Getting it to work is simple… " would be really helpful, specially for sh2010-beginners like me.
special thanxx
george sabau
August 24th, 2010 at 9:28 am
@george: could you provide some more information about what steps did you take and if you're getting any errors?
August 25th, 2010 at 5:16 pm
thanks first for your quick reply!
well, here are the few steps I took:
1) I added the wsp-solution over the sp_powershell (stsadm -0 addsolution …)
2) went on to the central server administration/farm solutions and deployed the MaventionSimpleSiteMapPath added before.
3) opened the sp_designer, added the register- and control-code to the masterpage.
and here is the I'm getting:
SimpleSiteMapPath – Unnamed27
There was an error rendering the control
Check to make sure all properties are valid. Request for the permission of type "SystemSecurity.Permissions.SecurityPermission, mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' failed
I tried a lot of different things in the web.config and other stuff to grant permissions to this solutions, but I'm not sure what to do best…
August 25th, 2010 at 7:02 pm
@George: did you deploy it to the right Web Application? The assembly is being deployed to the BIN directory and during the deployment it provisions a custom CAS policy. Can you verify if the assembly is in the BIN directory of your Web Application and if the permission level is set to WSS_Custom?
August 27th, 2010 at 9:33 am
Thank you!
the PermissionSetName(in WSS_Costom's policy File) was still on "Nothing" and I had to put it on "FullTrust"
works now!
george
November 14th, 2010 at 3:49 am
Sheesh… this one pretty much floored me, great stuff and it makes you wonder why that wasn't provided standard in SF! Thanks alot, saved me a ton of work man.
March 18th, 2011 at 3:26 pm
pls i could not find the wss_custom in the bin directory of my web application. i have deployed the solution, but need to install. need to edit the cas policy. you show the path to the bin directory. thanks
March 19th, 2011 at 8:10 am
@idowu ibrahim: you shouldn't modify the wss_custom file manually. Instead you should include the CAS policy in your WSP Package, so that when you deploy it, the CAS policy will be automatically applied on all servers.
March 19th, 2011 at 1:31 pm
thanks. could you give me a step by step way of doing that.
although i have deployed it and i could see it in the central admin. i addeed the code to the masterpage but it gave an error i know was due to the cas policy.
March 21st, 2011 at 2:43 pm
ok finally i was able to set tghe permission to full trust and i noticed root node and two other lines in design view sharepoint designer but i cant actually see the breadcrumb via the browser. pls any other thing i need to put in place thanks.
March 21st, 2011 at 3:35 pm
thanks now working but is there anyway i can edit the css. is there anyway i can make the order horizontal as in 2007 rather than vertical? thanks.
June 7th, 2011 at 10:33 pm
I love this solution. I'm using on my third project so thank you for the work.
I would suggest keeping the separator inside the list item to contain it within the lowest-level block element. You can add a span around the separator for styling as well.
Just a suggestion.
June 8th, 2011 at 6:09 am
Great suggestion, Chris. The best of it is, that the code is available on CodePlex so you can tweak the solution to fit your specific case.
June 8th, 2011 at 5:07 pm
Excellent! Congratulations
September 14th, 2011 at 7:59 pm
Hi!
It seems a great solution but I had the following error when trying to add it to the master page:
SimpleSiteMapPath – Unnamed26There was an error rendering the control.
Check to make sure all properties are valid.Request for the permission of type 'System.Security.Permissions.SecurityPermission, mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' failed.
If you have any idea I'll appreciate it.
September 16th, 2011 at 6:44 am
@Dani: Do you have any idea what the 'Unnamed26' is referring to?
September 27th, 2011 at 6:57 pm
Hi – this is a great tool and we have been using it – there is however a new request from one of our clients. They want the breadcrumb to display the Title of the Default.aspx \ Welcome Page. Any ideas as to how this can be accomplished?
Thanks
Kalpana
September 27th, 2011 at 7:26 pm
Thank you for this excellent tool. However I have a request from the client who want the Welcome Page title to also be displayed on the breadcrumb. Is this possible with some settings on the Master Page.
Appreciate your quick response.
Thanks
Kalpana
September 28th, 2011 at 3:33 pm
@Kalpana: Unfortunately I'm afraid you cannot do this very easily. The breadcrumb is built using navigation provider which uses Site Title instead of the Welcome Page Title in the navigation. So if you want to explicitly use Welcome Page Title you would have to reimplement the logic of retrieving breadcrumb nodes.
September 28th, 2011 at 6:02 pm
Thank you for your quick response. Do you have the source code available? If so, can you please send me the url from where I can download or email me the code?
Thanks
Kalpana
September 29th, 2011 at 6:29 am
@Kalpana: Unfortunately the source code for this solution is not available. What you could try is to disassemble the binaries and extract the code from there.
September 29th, 2011 at 12:13 pm
Thank you – I did that.
October 5th, 2011 at 9:19 am
Hi,
I have this on my master page.
And on my page layout m ovveriding it with this.
My Requirement is that i want to drop News from this navigation :
Home / News / India / Testpage
required: Home / India / Testpage
Please help me how can i get it, Tried with navigation settings but it dosent work for me.
October 5th, 2011 at 9:19 am
Hi,
I have this on my master page.
<asp:ContentPlaceHolder id=\"PlaceHolderTitleBreadcrumb\" runat=\"server\">
<asp:SiteMapPath ID=\"SiteMapPath1\"
runat=\"server\"
SiteMapProviders=\"SPSiteMapProvider,SPContentMapProvider\"
RenderCurrentNodeAsLink=\"false\"
NodeStyle-CssClass=\"breadcrumbNode\"
CurrentNodeStyle-CssClass=\"breadcrumbCurrentNode\"
RootNodeStyle-CssClass=\"breadcrumbRootNode\"
HideInteriorRootNodes=\"true\"
SkipLinkText=\"\"
CssClass=\"metso-breadcrumb\"/>
</asp:ContentPlaceHolder>
And on my page layout m ovveriding it with this.
<asp:Content ContentPlaceHolderId=\"PlaceHolderTitleBreadcrumb\" runat=\"server\">
<asp:SiteMapPath ID=\"siteMapPath\"
runat=\"server\" NodeStyle-CssClass=\"breadcrumbNode\"
CurrentNodeStyle-CssClass=\"breadcrumbCurrentNode\"
RootNodeStyle-CssClass=\"breadcrumbRootNode\"
HideInteriorRootNodes=\"true\"
CssClass=\"metso-breadcrumb\"
SiteMapProvider=\"CurrentNavSiteMapProviderNoEncode\"
RenderCurrentNodeAsLink=\"true\" SkipLinkText=\"\"/>
</asp:Content>
My Requirement is that i want to drop News from this navigation :
Home / News / India / Testpage
required: Home / India / Testpage
Please help me how can i get it, Tried with navigation settings but it dosent work for me.
October 10th, 2011 at 4:12 am
@Dabbu: In order to skip a navigation level in breadcrumbs you would either have to create your own navigation provider or you would have to customize the breadcrumb control and make it not display the second level. Changing the navigation configuration is not enough.
January 6th, 2012 at 6:42 pm
Thanks for the tutorial, it was really helpful. :)