Display special character in SharePoint global navigation, quick launch and breadcrumb

On my SharePoint global navigation menu, quick launch or breadcrumb, for pages that has special character in their name, the characters are encoded. For example, “Health & Safety” displays as “Health & Safety”, “Tomorrow’s Leader” displays as “Tomorrow#39;s”.

The solution for the global navigation is to add

EncodeTitle=”false” in the AspMenu control.

<!-- ------------| TOP NAVIGATION  |------------ -->
<!-- top navigation publishing data source -->

<!-- ------------| TOP NAVIGATION  |------------ -->
The solution for the quick launch is to add EncodeTitle=”false” in the quick launch control:
<SharePointWebControls:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" EncodeTitle="false" UseSeparateCss="false" Orientation="Vertical" StaticDisplayLevels="10" MaximumDynamicDisplayLevels="7" SkipLinkText="" CssClass="s4-ql noindex" />
The solution for the breadcrumb is different. We need to add javascript to do this. Here is the js code:
<script type="text/javascript">

    jQuery(document).ready(function () {



    function fixSiteTitleBug()
        var searchAmp = '&amp;';
        var replaceAmp = '&';
        var searchQuote = '#39;';
        var replaceQuote = '\'';

        // Fix Quick Launch items
        var html = jQuery('#s4-leftpanel-content').html().replace(searchPattern, replacement);

        // Fix breadcrumb items
        jQuery('a.SolidBreadCrumbRoot').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchAmp , replaceAmp ));

        jQuery('a.SolidBreadCrumb').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchAmp , replaceAmp ));

        jQuery('.SolidBreadCrumbCurrent').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchAmp , replaceAmp ));

        jQuery('a.SolidBreadCrumbRoot').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchQuote, replaceQuote));

        jQuery('a.SolidBreadCrumb').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchQuote, replaceQuote));

        jQuery('.SolidBreadCrumbCurrent').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchQuote, replaceQuote));


Use jQuery to customize Quick Launch in SharePoint 2010

I needed to customize my quick launch so that

  1. The very top level has a different style from its children
  2. Only display one level down at once, other nodes are collapsed
  3. Add indent between levels.
  4. When a link is selected, it will lose the URL and toggled when clicked

Things I had to do to get this:

SharePoint Navigation Setting, CSS and jQuery

Final look:

SharePoint Navigation Setting:

Change the navigaion settings at Site Actions->Site Settings->Look and Feel->Navigation->Current Navigation

Top navigation setting: (E.g “Our Science” level)

Second level setting: (E.g “Animal performance, Plant & forage, Land & environment” level)

Third level setting: (E.g. “Reproduction”, “Genomics”, “Growth & development” level)
In this case, the next level below this are all pages, not subsites, so no need to change the settings for the next level down.

CSS used to style the quick launch:

/* |--------- Quicklaunch -----------| */ 
.s4-ql ul.root ul { margin-bottom:5px; } 

/* Outher nav element */ 
#s4-leftpanel-content{ background-color:#fff!important; border:1px #d8d6d7 solid!important; border:0px!important } 

/* Inner nav element */ 
.menu-vertical { padding-right:10px!important; padding-left:10px!important; } 

/* Inner Inner nav element */ 
.menu-vertical > ul.root { padding-top:3px; } 

/* Level 1 static item and hover state */ 
.menu-vertical > ul.root > li.static > .menu-item{padding-left:0px!important; padding:1px!important; color:#333!important; } 
.menu-vertical > ul.root > li.static > .menu-item:hover{  text-decoration:none;  color:#8cc63e!important; }

/* Level 2 static item and hover state */ 
.menu-vertical > ul.root > li.static > ul.static > li.static >.menu-item{ padding-left:0px!important; padding:1px!important; color:#333!important;  font-weight:bold; } 
.menu-vertical > ul.root > li.static > ul.static > li.static >.menu-item:hover{  text-decoration:none;  color:#8cc63e!important; }

/* Level 3 static item and hover state */ 
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.static > li.static >.menu-item{ padding-left:0px!important; padding:1px!important; color:#333!important; } 
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.static > li.static >.menu-item:hover{  text-decoration:none;  color:#8cc63e!important; }

/*Level 1 selected item - Level1 include Our Science, Animal performance, Plant & forage etc */ 
.menu-vertical > ul.root > li.selected > .menu-item{ background-color:transparent!important; border:0px; margin:0px; padding:0px;  color:#8cc63e!important; }

/*Level 2 selected item*/ 
.menu-vertical > ul.root > li.static > ul.static >li.selected > .menu-item{ background-image:none!important; background-color:transparent; border:0px; margin-top:1px;  color:#8cc63e!important; }

/*Level 3 selected item*/ 
.menu-vertical > ul.root > li.static > ul.static >li.static > ul.static >li.selected >.menu-item{ background-image:none!important; background-color:transparent!important; border:0px; margin:0px; padding:0px;  color:#8cc63e!important; }

/* Sublinks margins */ 
.menu-vertical > ul.root > li.static > ul.static  { margin-top:5px; margin-bottom:5px; }

/* no border for the QL when no links */ 
.s4-specialNavLinkList { border:0px } 

/* Liststyle square */ 
.s4-ql ul.root ul > li  { list-style:square inside !important; list-style-position:outside !important; margin-left: 23px !important; padding-top:0px; } 

/* Liststyle square links */ 
.s4-ql ul.root ul > li > a { display: inline-block!important; padding-top:0px; padding-bottom:5px!important; padding-left:0px!important; vertical-align:top!important; }

jQuery used:

function() {
/*Toggle quick launch*/
//Hide all children         
$('.s4-ql li ul').hide(); 
//Remove the url from the selected item 
$('.s4-ql .selected').removeAttr('href');

//Add class to selected item so it can be toggled when click
$('.s4-ql .selected a').addClass('min');

//Display the selected items parents nodes 
$('.s4-ql .selected').parent().parent().show();
$('.s4-ql .selected').parent().parent().parent().show();

//Display the selected item's immediate child
$('.s4-ql ul li.selected').find('ul:first').show();

//In the root level, the heading and it's children are considered to be the same level, 
//to distiguish them, the first child will have bold font and black bottom border
//and other children will have a left indent and a black arrow in front of them.
$('.s4-ql ul.root').find('li:first').css({'font-weight':'bold', 'border-bottom':'1px black solid'});
$('.s4-ql ul.root').find('li:first').siblings('li').css({'padding-left':'20px', 'background':'url(\'/Style Library/Ag_Custom/images/arrow.png\') no-repeat 5px 5px;'});

//Setup Click Hanlder for min class       
$('.min').click(function() { 
//Traverse the DOM to find the child UL node             
var subList = $(this).siblings('ul'); 

//Toggle the UL             
/*End toggle quick launch*/

Here is how I used the Developer’s Tool in IE9 to select the items: