Advanced Search

Breadcrumb in Sharepoint 2010

/ Published in: ASP
Save to your folder(s)
Both ASP and Javascript versions provided below. Use either one or the other. Code should be placed in a SharePoint 2010 master page.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <%-- ASP Version: Breadcrumb and Page description --%>
  2. 			<div class="s4-titletext s4-notdlg">
  3. 			   <h1 name="onetidProjectPropertyTitle">
  4. 					<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">
  5. 						<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle"><SharePoint:ProjectProperty Property="Title" runat="server" /></SharePoint:SPLinkButton>
  6. 					</asp:ContentPlaceHolder>
  7. 				</h1>
  8. 				<span id="onetidPageTitleSeparator" class="s4-nothome s4-bcsep s4-titlesep">
  9. 				<SharePoint:ClusteredDirectionalSeparatorArrow runat="server"/> </span>
  10. 				<h2>
  11. 					<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />
  12. 				</h2>
  13. 				<div class="s4-pagedescription" tabindex="0" >
  14. 					<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>
  15. 				</div>
  16. 			  </div>
  17. 			  <%-- End breadcrumb and Page description --%>
  18.  
  19. <%-- JQuery Version: Breadcrumb --%>
  20.  
  21. <div class="wss-BreadCrumb s4-notdlg"></div> 
  22. <script type="text/javascript">
  23. $("a.s4-breadcrumbRootNode").clone().appendTo('div.wss-BreadCrumb');
  24. $("a.s4-breadcrumbNode").clone().appendTo('div.wss-BreadCrumb');
  25. $("a.s4-breadcrumbCurrentNode").clone().appendTo('div.wss-BreadCrumb');
  26. $("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbRootNode');
  27. $("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbNode');
  28. $('div.wss-BreadCrumb').append($("title").html());
  29. $('.wss-BreadCrumb a').each(function(){
  30. 	if ($(this).html()=="Pages") {
  31. 		$(this).hide();
  32. 		$(this).next().hide();
  33. 	}
  34. 	});
  35.  
  36.  
  37. </script>
  38. <style type="text/css">
  39. div.wss-BreadCrumb
  40. {
  41. margin-bottom:5px;
  42. display: inline-block;
  43. font-size:11px; 
  44. font-weight:bold;
  45. }
  46.  
  47. div.wss-BreadCrumb span
  48. {
  49. margin-left:5px;
  50. margin-right: 5px;
  51. }
  52.  
  53. div.wss-BreadCrumb span.s4-breadcrumbCurrentNode
  54. {
  55. margin-left:0px;
  56. margin-right:0px;
  57. }
  58.  
  59.  
  60. div.wss-BreadCrumb a.s4-breadcrumbNode, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode,
  61. div.wss-BreadCrumb a.s4-breadcrumbRootNode
  62. {
  63. color: #818181; font-weight:normal;
  64. }
  65. div.wss-BreadCrumb a.s4-breadcrumbNode:hover, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode:hover,
  66. div.wss-BreadCrumb a.s4-breadcrumbRootNode:hover {text-decoration:underline; }
  67.  
  68.  
  69. </style>
  70. 	<%-- end breadcrumb --%>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.