Creating flat site collection breadcrumb for SharePoint sites

SharePoint has several ways to navigate through site hierarchy and many users are used to breadcrumb to see where they are etc. Some consider collapse breadcrumb “folder” control not too intuitive and you may be asked to define your breadcrumb more explicitly or as a “flat” set of links.

To save yourself some time from custom development of the breadcrumb you can take the breadcrumb “folder” content and render it in a flat format. To do that we will take the SharePoint:ListSiteMapPath control which lives on each masterpage and place it right inside s4-titletext in your main masterpage:

Here is the code:

<sharepoint:ListSiteMapPath ID="ListSiteMapPath11" runat="server" 
SiteMapProviders="SPSiteMapProvider" 
RenderCurrentNodeAsLink="false" 
PathSeparator="" CssClass="s4-breadcrumb" 
NodeStyle-CssClass="s4-breadcrumbNode" 
CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode" 
RootNodeStyle-CssClass="s4-breadcrumbRootNode" 
NodeImageOffsetX=0 
NodeImageOffsetY=582 
NodeImageWidth=16 
NodeImageHeight=16 
NodeImageUrl="/_layouts/images/fgimg.png" 
RTLNodeImageOffsetX=0 
RTLNodeImageOffsetY=582 
RTLNodeImageWidth=16 
RTLNodeImageHeight=16 
RTLNodeImageUrl="/_layouts/images/fgimg.png" 
HideInteriorRootNodes="true" 
SkipLinkText=""/>

Now you just need to adjust the CSS to flatten the structure; in here I’ll add the following CSS into the masterpage

.s4-title-inner .s4-titletext

{ margin-bottom: 3px; }

.s4-title-inner .s4-titletext ul, .s4-title-inner .s4-titletext ul li

{ display: inline; }

.s4-title-inner .s4-titletext ul.s4-breadcrumbRootNode, .s4-title-inner .s4-titletext ul.s4-breadcrumbNode

{ margin-left: 5px; }

This CSS is specific to the breadcrumb in s4-titletext and will not affect other elements on the masterpage.

Reference : Creating flat site collection breadcrumb for SharePoint sites

Advertisements