Change Top BreadCrumb into Nice Menu

By default SharePoint comes with global navigation menu at the top left corner of your master page. The limited point of this menu is you can not see everything thru it within entire site collection. Even BreadCrumb webpart also not fulfills this requirement when you want to jump directly from one list of certain site to another list of some other site within same site collection. You have to open that site first using top navigation area, and then open up the list from quick launch.

Well, you can change this limitation to a nice looking dynamic menu by replacing few lines of codes in your masterpage.

Open up your default master page in SharePoint designer, (Take backup before modifying, or better create new master page from existing one).

Now search for the “PlaceHolderGlobalNavigationSiteMap” area. The code we need to change will look like

<asp:ContentPlaceHolder
id=PlaceHolderGlobalNavigationSiteMap
runat=server>

<asp:SiteMapPath
SiteMapProvider=SPSiteMapProvider
id=GlobalNavigationSiteMap
RenderCurrentNodeAsLink=true
SkipLinkText=“”
NodeStyle-CssClass=ms-sitemapdirectionalrunat=server/>
</
asp:ContentPlaceHolder>

and replace it with following code

<asp:ContentPlaceHolder id=PlaceHolderGlobalNavigationSiteMap” runat=server>
<!– Default Breadcrumb —

<asp:SiteMapPath
SiteMapProvider=SPSiteMapProvider
id=GlobalNavigationSiteMap
RenderCurrentNodeAsLink=true
SkipLinkText=“”
NodeStyle-CssClass=ms-sitemapdirectional
runat=server/>

–>
<asp:Menu runat=server
id=GlobalMenu
DataSourceID=SPSiteMapProvider
Font-Size=Smaller
CssClass=ms-topNavContainer
MaximumDynamicDisplayLevels=“6”>
<StaticMenuStyle/>
<StaticMenuItemStyle CssClass=ms-topnavItemSpacing=0px/>
<StaticSelectedStyle CssClass=ms-topnavselected />
<StaticHoverStyle CssClass=ms-topNavHover />
<DynamicMenuStyle BackColor=#F2F3F4BorderColor=#A7B4CEBorderWidth=1px/>
<DynamicMenuItemStyle CssClass=ms-topNavFlyOuts/>
<DynamicHoverStyle CssClass=ms-topNavFlyOutsHover/>
<DynamicSelectedStyle CssClass=ms-topNavFlyOutsSelected/>
</asp:Menu>
<asp:SiteMapDataSource runat=serverID=SPSiteMapProvider/>
</asp:ContentPlaceHolder>

Now just save and apply the master page and you will have nice dynamic menu on top of page to start jumping.

In my case we have sites were deep enough so I applied MaximumDynamicDisplayLevels=“6” but in most case I think 4 or 5 levels enough seems ok.

You can also change the menu lookup by custom css. In this case I used default Menu Style used for the “Top Navigation Menu”, you can also apply look of Site action menu by using class=”ms-siteactionsmenu”

Advertisements