Breadcrumb in Sharepoint 2010 - ASP Snipplr Social Repository

Revision: 55950

at December 28, 2012 09:12 by rumremix

Updated Code

<%-- ASP Version: Breadcrumb and Page description --%>
			<div class="s4-titletext s4-notdlg">
			   <h1 name="onetidProjectPropertyTitle">
					<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">
						<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle"><SharePoint:ProjectProperty Property="Title" runat="server" /></SharePoint:SPLinkButton>
					</asp:ContentPlaceHolder>
				</h1>
				<span id="onetidPageTitleSeparator" class="s4-nothome s4-bcsep s4-titlesep">
				<SharePoint:ClusteredDirectionalSeparatorArrow runat="server"/> </span>
				<h2>
					<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />
				</h2>
				<div class="s4-pagedescription" tabindex="0" >
					<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>
				</div>
			  </div>
			  <%-- End breadcrumb and Page description --%>

<%-- JQuery Version: Breadcrumb --%>
		
<div class="wss-BreadCrumb s4-notdlg"></div> 
<script type="text/javascript">
$("a.s4-breadcrumbRootNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbCurrentNode").clone().appendTo('div.wss-BreadCrumb');
$("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbRootNode');
$("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbNode');
$('div.wss-BreadCrumb').append($("title").html());
$('.wss-BreadCrumb a').each(function(){
	if ($(this).html()=="Pages") {
		$(this).hide();
		$(this).next().hide();
	}
	});


</script>
<style type="text/css">
div.wss-BreadCrumb
{
margin-bottom:5px;
display: inline-block;
font-size:11px; 
font-weight:bold;
}

div.wss-BreadCrumb span
{
margin-left:5px;
margin-right: 5px;
}

div.wss-BreadCrumb span.s4-breadcrumbCurrentNode
{
margin-left:0px;
margin-right:0px;
}


div.wss-BreadCrumb a.s4-breadcrumbNode, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode,
div.wss-BreadCrumb a.s4-breadcrumbRootNode
{
color: #818181; font-weight:normal;
}
div.wss-BreadCrumb a.s4-breadcrumbNode:hover, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode:hover,
div.wss-BreadCrumb a.s4-breadcrumbRootNode:hover {text-decoration:underline; }


</style>
	<%-- end breadcrumb --%>

Revision: 55949

at March 1, 2012 13:12 by rumremix

Updated Code

<%-- ASP Version: Breadcrumb and Page description --%>
			<div class="s4-titletext s4-notdlg">
			   <h1 name="onetidProjectPropertyTitle">
					<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">
						<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle"><SharePoint:ProjectProperty Property="Title" runat="server" /></SharePoint:SPLinkButton>
					</asp:ContentPlaceHolder>
				</h1>
				<span id="onetidPageTitleSeparator" class="s4-nothome s4-bcsep s4-titlesep">
				<SharePoint:ClusteredDirectionalSeparatorArrow runat="server"/> </span>
				<h2>
					<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />
				</h2>
				<div class="s4-pagedescription" tabindex="0" >
					<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>
				</div>
			  </div>
			  <%-- End breadcrumb and Page description --%>

<%-- JQuery Version: Breadcrumb --%>
		
div class="wss-BreadCrumb s4-notdlg"></div> 
<script type="text/javascript">
$("a.s4-breadcrumbRootNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbCurrentNode").clone().appendTo('div.wss-BreadCrumb');
$("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbRootNode');
$("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbNode');
$('div.wss-BreadCrumb').append($("title").html());
$('.wss-BreadCrumb a').each(function(){
	if ($(this).html()=="Pages") {
		$(this).hide();
		$(this).next().hide();
	}
	});


</script>
<style type="text/css">
div.wss-BreadCrumb
{
margin-bottom:5px;
display: inline-block;
font-size:11px; 
font-weight:bold;
}

div.wss-BreadCrumb span
{
margin-left:5px;
margin-right: 5px;
}

div.wss-BreadCrumb span.s4-breadcrumbCurrentNode
{
margin-left:0px;
margin-right:0px;
}


div.wss-BreadCrumb a.s4-breadcrumbNode, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode,
div.wss-BreadCrumb a.s4-breadcrumbRootNode
{
color: #818181; font-weight:normal;
}
div.wss-BreadCrumb a.s4-breadcrumbNode:hover, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode:hover,
div.wss-BreadCrumb a.s4-breadcrumbRootNode:hover {text-decoration:underline; }


</style>
	<%-- end breadcrumb --%>

Revision: 55948

at March 1, 2012 12:39 by rumremix

Updated Code

<%-- ASP Version: Breadcrumb and Page description --%>
			<div class="s4-titletext s4-notdlg">
			   <h1 name="onetidProjectPropertyTitle">
					<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">
						<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle"><SharePoint:ProjectProperty Property="Title" runat="server" /></SharePoint:SPLinkButton>
					</asp:ContentPlaceHolder>
				</h1>
				<span id="onetidPageTitleSeparator" class="s4-nothome s4-bcsep s4-titlesep">
				<SharePoint:ClusteredDirectionalSeparatorArrow runat="server"/> </span>
				<h2>
					<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />
				</h2>
				<div class="s4-pagedescription" tabindex="0" >
					<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>
				</div>
			  </div>
			  <%-- End breadcrumb and Page description --%>

<%-- JQuery Version: Breadcrumb --%>
		
div class="wss-BreadCrumb s4-notdlg"></div> 
<script type="text/javascript">
$("a.s4-breadcrumbRootNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbCurrentNode").clone().appendTo('div.wss-BreadCrumb');
$("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbRootNode');
$("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbNode');
$('div.wss-BreadCrumb').append($("title").text());
$('.wss-BreadCrumb a').each(function(){
	if ($(this).html()=="Pages") {
		$(this).hide();
		$(this).next().hide();
	}
	});


</script>
<style type="text/css">
div.wss-BreadCrumb
{
margin-bottom:5px;
display: inline-block;
font-size:11px; 
font-weight:bold;
}

div.wss-BreadCrumb span
{
margin-left:5px;
margin-right: 5px;
}

div.wss-BreadCrumb span.s4-breadcrumbCurrentNode
{
margin-left:0px;
margin-right:0px;
}


div.wss-BreadCrumb a.s4-breadcrumbNode, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode,
div.wss-BreadCrumb a.s4-breadcrumbRootNode
{
color: #818181; font-weight:normal;
}
div.wss-BreadCrumb a.s4-breadcrumbNode:hover, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode:hover,
div.wss-BreadCrumb a.s4-breadcrumbRootNode:hover {text-decoration:underline; }


</style>
	<%-- end breadcrumb --%>

Revision: 55947

at March 1, 2012 12:33 by rumremix

Updated Code

<%-- ASP Version: Breadcrumb and Page description --%>
			<div class="s4-titletext s4-notdlg">
			   <h1 name="onetidProjectPropertyTitle">
					<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">
						<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle"><SharePoint:ProjectProperty Property="Title" runat="server" /></SharePoint:SPLinkButton>
					</asp:ContentPlaceHolder>
				</h1>
				<span id="onetidPageTitleSeparator" class="s4-nothome s4-bcsep s4-titlesep">
				<SharePoint:ClusteredDirectionalSeparatorArrow runat="server"/> </span>
				<h2>
					<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />
				</h2>
				<div class="s4-pagedescription" tabindex="0" >
					<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>
				</div>
			  </div>
			  <%-- End breadcrumb and Page description --%>

<%-- JQuery Version: Breadcrumb --%>
		
div class="wss-BreadCrumb"></div> 
<script type="text/javascript">
$("a.s4-breadcrumbRootNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbNode").clone().appendTo('div.wss-BreadCrumb');
$("a.s4-breadcrumbCurrentNode").clone().appendTo('div.wss-BreadCrumb');
$("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbRootNode');
$("<span>&gt;</span>").insertAfter('div.wss-BreadCrumb a.s4-breadcrumbNode');
$('div.wss-BreadCrumb').append($("title").text());
$('.wss-BreadCrumb a').each(function(){
	if ($(this).html()=="Pages") {
		$(this).hide();
		$(this).next().hide();
	}
	});


</script>
<style type="text/css">
div.wss-BreadCrumb
{
margin-bottom:5px;
display: inline-block;
font-size:11px; 
font-weight:bold;
}

div.wss-BreadCrumb span
{
margin-left:5px;
margin-right: 5px;
}

div.wss-BreadCrumb span.s4-breadcrumbCurrentNode
{
margin-left:0px;
margin-right:0px;
}


div.wss-BreadCrumb a.s4-breadcrumbNode, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode,
div.wss-BreadCrumb a.s4-breadcrumbRootNode
{
color: #818181; font-weight:normal;
}
div.wss-BreadCrumb a.s4-breadcrumbNode:hover, div.wss-BreadCrumb a.s4-breadcrumbCurrentNode:hover,
div.wss-BreadCrumb a.s4-breadcrumbRootNode:hover {text-decoration:underline; }


</style>
	<%-- end breadcrumb --%>

Revision: 55946

at March 1, 2012 10:57 by rumremix

Initial Code

<%-- Breadcrumb and Page description --%>
			<div class="s4-titletext s4-notdlg">
			   <h1 name="onetidProjectPropertyTitle">
					<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">
						<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle"><SharePoint:ProjectProperty Property="Title" runat="server" /></SharePoint:SPLinkButton>
					</asp:ContentPlaceHolder>
				</h1>
				<span id="onetidPageTitleSeparator" class="s4-nothome s4-bcsep s4-titlesep">
				<SharePoint:ClusteredDirectionalSeparatorArrow runat="server"/> </span>
				<h2>
					<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />
				</h2>
				<div class="s4-pagedescription" tabindex="0" >
					<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>
				</div>
			  </div>
			  <%-- End breadcrumb and Page description --%>

Initial URL

Initial Description

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

Initial Title

Breadcrumb in Sharepoint 2010

Initial Tags

sharepoint

Initial Language

ASP

Choose a language for easy browsing: