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. :)
March 12th, 2012 at 6:28 pm
Need help! I'm sorry, I'm new to Sharepoint. I deployed the solution, then I added this to my master page:
Now I'm not sure where to put this control:
I'd like to have the breadcrumb at the top of each page. When I place it in the header, I get this message:
System.Web.HttpException: The server tag is not well formed. at System.Web.UI.TemplateParser.ProcessError(String message) at System.Web.UI.TemplateParser.ParseStringInternal(String text, Encoding fileEncoding) at System.Web.UI.TemplateParser.ParseString(String text, VirtualPath virtualPath, Encoding fileEncoding) b2a23a91-38e9-456b-86ea-7e9cc2135c3b
Can anyone tell me what file and where to put the control please???
March 12th, 2012 at 6:37 pm
Can anyone tell me where the control goes? Does it go in the master page? If yes, what section so that it turns up at the header of each page? I'm assuming header, but I get an error no matter where I put it.
March 12th, 2012 at 6:39 pm
Here's the error I'm getting if I put it in the header:
Error Creating Control – Mavention:simplesitemappathcssclass="breadcrumbs"runat="server"rendercurrentnodeaslink="false"usesimplerendering="true"pathseparator=""skiplinktext=""No 'runat=server'
attribute present on the simplesitemappathcssclass="breadcrumbs"runat="server"rendercurrentnodeaslink="false"usesimplerendering="true"pathseparator=""skiplinktext="" tag.
March 12th, 2012 at 7:24 pm
never mind! when copy/pasting the control, it removes all spaces, so soon as I fixed the spacing, it worked. UGGG – total Newb mistake. Someone please smack me!!!
March 13th, 2012 at 3:52 pm
Help! Deployed the solution, put control in master page…Getting this error
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
What do I put in the web.config file to make it work properly? I'm new to SP so please dummy it down.
March 17th, 2012 at 11:13 am
@PME: It's CAS error. The easiest fix is to change the deployment type to GlobalAssemblyCache. A better solution would be to add CAS policies to the solution but it's also more complex.
June 22nd, 2012 at 11:44 am
@Waldek: I need to have link url (Microsoft.com) as the top link in the navigate button. to all the sites. how to do this. what should the approach?
example: Microsoft–>Site1—> subsite
June 24th, 2012 at 11:42 am
The easiest way I know of would be to use the Mavention Templated Site Map Path (http://blog.mastykarz.nl/building-breadcrumbs-sharepoint-2010/) and set the RootNodeTemplate to your fixed link.
October 22nd, 2012 at 9:03 am
Hi,
It thrown out the below errors when I click on the 'Activate' button… Please help !!!!!!!!!!!!!!
Server Error in '/' Application.
——————————————————————————–
This solution contains invalid markup or elements that cannot be deployed as part of a sandboxed solution. Solution manifest for solution '99edd52c-5131-40a5-993b-1fd2104aeb22' failed validation, file manifest.xml, line 3, character 4: The element 'Solution' in namespace 'http://schemas.microsoft.com/sharepoint/' has invalid child element 'CodeAccessSecurity' in namespace 'http://schemas.microsoft.com/sharepoint/'. List of possible elements expected: 'FeatureManifests, Assemblies, ActivationDependencies' in namespace 'http://schemas.microsoft.com/sharepoint/'.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: Microsoft.SharePoint.SPException: This solution contains invalid markup or elements that cannot be deployed as part of a sandboxed solution. Solution manifest for solution '99edd52c-5131-40a5-993b-1fd2104aeb22' failed validation, file manifest.xml, line 3, character 4: The element 'Solution' in namespace 'http://schemas.microsoft.com/sharepoint/' has invalid child element 'CodeAccessSecurity' in namespace 'http://schemas.microsoft.com/sharepoint/'. List of possible elements expected: 'FeatureManifests, Assemblies, ActivationDependencies' in namespace 'http://schemas.microsoft.com/sharepoint/'.
Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
Stack Trace:
[SPException: This solution contains invalid markup or elements that cannot be deployed as part of a sandboxed solution. Solution manifest for solution '99edd52c-5131-40a5-993b-1fd2104aeb22' failed validation, file manifest.xml, line 3, character 4: The element 'Solution' in namespace 'http://schemas.microsoft.com/sharepoint/' has invalid child element 'CodeAccessSecurity' in namespace 'http://schemas.microsoft.com/sharepoint/'. List of possible elements expected: 'FeatureManifests, Assemblies, ActivationDependencies' in namespace 'http://schemas.microsoft.com/sharepoint/'.]
Microsoft.SharePoint.Administration.SPUserCodeSolutionPackage.SPUserSolutionManifestValidationCallBack(Object sender, ValidationEventArgs evtargs) +23835234
System.Xml.Schema.XmlSchemaValidator.ValidateElementContext(XmlQualifiedName elementName, Boolean& invalidElementInContext) +715
System.Xml.Schema.XmlSchemaValidator.ValidateElement(String localName, String namespaceUri, XmlSchemaInfo schemaInfo, String xsiType, String xsiNil, String xsiSchemaLocation, String xsiNoNamespaceSchemaLocation) +178
System.Xml.XsdValidatingReader.ProcessElementEvent() +939
System.Xml.XsdValidatingReader.Read() +276
System.Xml.XmlReader.MoveToContent() +22
System.Xml.XmlReader.IsStartElement() +13
Microsoft.SharePoint.Utilities.SPUtility.XsdValidateXml(XmlTextReader xmlStreamReader, String friendlyName, String pathXsdFile, String tagExpectedRootNode, ValidationEventHandler xsdValEventHandler) +605
Microsoft.SharePoint.Administration.SPUserCodeSolutionPackage.ValidateSolutionManifest() +135
Microsoft.SharePoint.Administration.SPSolutionPackage.ProcessSolutionManifest() +982
Microsoft.SharePoint.Administration.SPSolutionPackage.Load() +46
Microsoft.SharePoint.Administration.SPSolutionLanguagePack.CreateSolutionPackage(SPRequest request, String name, String signature, Byte[] fileBytes) +22920364
Microsoft.SharePoint.c__DisplayClass1.b__0() +239
Microsoft.SharePoint.Utilities.SecurityContext.RunAsProcess(CodeToRunElevated secureCode) +27913158
Microsoft.SharePoint.SPUserSolutionCollection.AddOrUpgrade(SPListItem item, SPUserSolution existingSolution) +449
Microsoft.SharePoint.SPUserSolutionCollection.Add(Int32 solutionGalleryItemId) +574
Microsoft.SharePoint.WebControls.SolutionItemButton.ActivateItem() +398
Microsoft.SharePoint.WebControls.SPLinkButton.System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(String eventArgument) +72
System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument) +29
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2981
——————————————————————————–
Version Information: Microsoft .NET Framework Version:2.0.50727.5446; ASP.NET Version:2.0.50727.5420
October 22nd, 2012 at 9:10 am
Hi,
When I click on the 'Activate' button, the below Error generated, any idea please !!
This solution contains invalid markup or elements that cannot be deployed as part of a sandboxed solution. Solution manifest for solution '99edd52c-5131-40a5-993b-1fd2104aeb22' failed validation, file manifest.xml, line 3, character 4: The element 'Solution' in namespace 'http://schemas.microsoft.com/sharepoint/' has invalid child element 'CodeAccessSecurity' in namespace 'http://schemas.microsoft.com/sharepoint/'. List of possible elements expected: 'FeatureManifests, Assemblies, ActivationDependencies' in namespace 'http://schemas.microsoft.com/sharepoint/'.
October 22nd, 2012 at 11:51 am
Mavention Simple SiteMapPath is not a Sandboxed Solution hence the error that you are getting.