SharePoint Branding: Adding Navigate Up breadcrumb on your search center | Yaroslav Pentsarskyy on SharePoint Development

As you may know, SharePoint search has one problem where you can’t get out of it back to the home page.

The reason behind this is the fact that search template uses minimal.master masterpage which doesn’t have all the great features that other master pages have. In SharePoint 2010 in particular there is a clean Navigate Up breadcrumb control displaying the tree of where you can jump back to the site.

To port this functionality over to search center, you could change the masterpage to v4.master for example – but the way the search page is constructed – you would end up fixing more just to make the page functional.

One of the alternatives is to create a new instance of minimal.master or edit existing one located under Site Actions -> Site Settings -> Masterpages

Here is what we need to do to it to make the Navigate Up control functional on the search page:

1. Locate the following code in minimal.master

<h3>

<asp:ContentPlaceHolder id="PlaceHolderPageSubTitle" runat="server" />

</h3>

<h3><asp:ContentPlaceHolder id="PlaceHolderPageSubTitle" runat="server" /></h3>

and right after it add the code of the dynamic menu breadcrumb which we’ve taken from v4.master:

<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server">

<SharePoint:PopoutMenu

runat="server"

ID="GlobalBreadCrumbNavPopout"

IconUrl="/_layouts/images/fgimg.png"

IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"

IconOffsetX=0

IconOffsetY=112

IconWidth=16

IconHeight=16

AnchorCss="s4-breadcrumb-anchor"

AnchorOpenCss="s4-breadcrumb-anchor-open"

MenuCss="s4-breadcrumb-menu">

<div class="s4-breadcrumb-top">

<asp:Label runat="server" CssClass="s4-breadcrumb-header" Text="<%$Resources:wss,master_breadcrumbHeader%>" />

</div>

<SharePoint:ListSiteMapPath

runat="server"

SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"

RenderCurrentNodeAsLink="false"

PathSeparator=""

CssClass="s4-breadcrumb"

NodeStyle-CssClass="s4-breadcrumbNode"

CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"

RootNodeStyle-CssClass="s4-breadcrumbRootNode"

NodeImageOffsetX=0

NodeImageOffsetY=353

NodeImageWidth=16

NodeImageHeight=16

NodeImageUrl="/_layouts/images/fgimg.png"

RTLNodeImageOffsetX=0

RTLNodeImageOffsetY=376

RTLNodeImageWidth=16

RTLNodeImageHeight=16

RTLNodeImageUrl="/_layouts/images/fgimg.png"

HideInteriorRootNodes="true"

SkipLinkText="" />

</SharePoint:PopoutMenu>

<div class="s4-die">

<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server" Visible="false">

</asp:ContentPlaceHolder>

</div>

</asp:ContentPlaceHolder>

Now, we’re almost done. The only item remaining is to adjust the style of the menu a little bit so it appears a bit more friendly:

add the following style to the bottom of the <head> declaration on your minimal.master

<style type="text/css">
#s4-mini-titlearea
{
color:#676767 !important;
font-size:1.4em;
white-space:nowrap;
}
.ms-popoutMenu{
top:85px !important;
}
</style>

And here is the result:

Enjoy!