Posted By

rumremix on 03/01/12


Tagged

breadcrumb sharepoint Bread crumb


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jlaws0n


Breadcrumb in Sharepoint 2010


 / Published in: ASP
 

Both ASP and Javascript versions provided below. Use either one or the other. Code should be placed in a SharePoint 2010 master page.

  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  

You need to login to post a comment.