Pages

7/09/2010

SharePoint 2010: Replacing the Crumb Trail and Changing the Title

I like SharePoint 2010, I really do… but I just can’t get the hang of the Site Title / Crumb Trail thing, and the Navigate Up button is just not right. Below is a series of screens to show how the 2010 navigation works, and the issues I have with the interface. There’s no point in just complaining, so I also have one possible “fix” at the end of this article.

Please leave some comments:

Am I not understanding how the crumb trail should work?

Do you have a better solution?

I know that I’m not done with this… so check back… (See here for more about the CSS to change the site title area.)

My Issues with the Site Title / Crumb Trail

The Home Page of the site

Issues:

The Site Title is small and not resizable. We had that issue in 2007 also, but we could fix it will a simple CSS addition. Here the title is part of the crumb trail.

Can you even tell if this site is a subsite of another site? (other than I named it #2) You can click the Navigate Up button to find out:

The “Home” text is almost ok, but I can’t edit this. (easily anyway)

In a document library:

Issues:

No room for long titles, especially with lists with long names

The View dropdown menu is now in the crumb trail! Any redesign/branding we do may lose the view menu!

When you dig into the CSS for this area, there is no clean way to set a new font, color or size. I’ll show how in another article (here), but it’s not as easy as it was in 2007.

In the library’s Security Documents folder:

Issues:

If I was happy with the issues already listed, then this screen is OK, but drill down another folder…

In a sub folder of Security Documents:

Issues:

When you get down to a sub-folder the crumb trail fails. There is no one-click way up to the parent folder. Your only option is to use Navigate Up (two clicks), or go to the top of the library and drill back down.

The Navigate Up dropdown:

A Possible Solution

Below is the result I want… a big title, and a working crumb trail with all of the folders.

Home page:

In a library with nested folders:

How to get there?

Hide the existing crumb trail, but leave the Site Title

Restyle the Site Title (color, font, size, etc)

Add the SharePoint 2007 crumb trail control

Copy the part of the hidden crumb trail’s HTML that displays the View dropdown to just after the 2007 crumb trail

Restyle the View dropdown to match the 2007 crumb trail

Steps:

Open SharePoint Designer 2010, open your site and open the v4.master master page for editing

Hide the existing crumb trial:

Search for “PlaceHolderPageTitleInTitleArea” and add a DIV block around the two lines before and one line after this text:

This will hide the existing crumb trail, but also hides the View dropdown which we will need later.

Restyle the Site Title At the end of the page, just before the </BODY> tag add a <STYLE> block something like this: (new code in bold)

12 comments:

I am trying to modify the CSS for the Crumb Trail in a Document Library, but cannot find the code anywhere. Your post mentions, "When you dig into the CSS for this area, there is no clean way to set a new font, color or size. I’ll show how in another article, but it’s not as easy as it was in 2007."

I've been slowing working on a book "SharePoint Customization for the Site Owner" that includes a lot of these kinds of tricks. At your request... I copied a little part of the User Interface Customization chapter into a new blog article:

I am working in implementing this breadcrumb, but I am stumbling on getting the listview dropdown to display. Do I need to use portalsitemappath since we are using the site collection publishing feature or should sitemappath be working? Not sure where I went wrong. I put the script up in the HEAD container. Does it need to be where the sitemappath DIV is? Thanks in advance for your help.

Mike - I also would like to use this breadcrumb implementation on our system pages. For some reason when I add this code to our branded masterpage it removes the branding and displays as OOTB design ... curious. Do you have a fix for that? Thanks again! :-)

Thanks for the response, Mike. I got the breadcrumb working the way I would like. I did move the script after and that did the trick. I love this! But on the system pages I would like to see the system path. For example, when I go to library setting page I would like to see "Home > Documents > Document Library Settings". I am guessing that I need to use a different sitemappath. Can you help?