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

9 Comments

  1. May 14, 2008 at 1:00 PM

    […] Celeb wrote an interesting post today onHere’s a quick excerptBy 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 … […]

  2. May 14, 2008 at 2:14 PM

    […] Change Top BreadCrumb into Nice Menu […]

  3. May 25, 2008 at 6:13 PM

    […] Change Top BreadCrumb into a 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. […]

  4. Hector said,

    June 13, 2008 at 1:51 AM

    Excellent! One of the Best SharePoint Tips!
    Thanks

  5. Lexcorp said,

    August 5, 2008 at 12:06 AM

    Hi… This tip es excellent, but i’m new on sharepoint, how to populating the asp menu???

  6. giorgio said,

    August 18, 2008 at 12:50 PM

    Hello, see your code, but not works if copy and paste in my default page without modifications. can you email me whith a correct code?

  7. Mark said,

    November 26, 2008 at 8:58 PM

    You have to change the quotation marks in Notepad, all of them. They are the wrong quotation marks. For me I had to delete the original code, for some reason the commenting is not working for me and SharePoint detects that the ContentPlaceHolder was used twice.

    This is a very useful post, thank you.

  8. larry said,

    January 9, 2009 at 3:15 PM

    Great job, great tip. Looking at this I am guessing that this can also be applied to the Title Breadcrumbs with some minor modifications. Where i see it useful is where an owner uses a folder structure. this would allow you to jump from any folder to any other folder.

  9. April 8, 2011 at 3:19 PM

    […] カスタマイズして下記の様にしたいと思います。 またまた、海外ブログのパクリです。 […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: