This post describes how to customize the standard Quick Launch in SharePoint by using SharePoint Designer 2010.
Branding the Quick Launch with only CSS could be a bit tricky and it takes a little while to become a friend with the markup of this navigation and have it to look the way you want. This first article in a series of two will show you how to create a simple custom look and feel with only CSS code. If you need to create a more advanced design for the Quick launch than you can do with just CSS, the alternatives is to manipulate the DOM with jQuery or using plain HTML with CSS and background images. Besides of this, CSS 3 comes with some exiting features like box shadow and border radius that lets you create stuff like boxes with curved corners but it’s not an option here because we need to render the master page in IE8 mode to get all functionalities intact in SharePoint 2010. I hope this post gives you some ideas and inspirations for branding the quick launch in the way you want.
Let’s go
Open SPD, create a custom master page and include a reference to an external CSS file. Paste the following CSS code in your custom CSS file. Save and publish the files and apply the master page to a site or your site collection. Use the browser and go to a site where you can see a Quick Launch to verify the changes. This first example uses a list style background image for the sub items. You can download the arrow icon here.
CSS
Add this CSS in your custom CSS file, don’t forget to change the path to the arrow icon to the folder where you put the image:
/* |--------- 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;
}
/* mainlinks */
.menu-vertical > ul.root > li.static > .menu-item{
border-bottom:1px #555 solid!important;
padding:1px 1px 1px 0px!important;
color:#333!important;
}
/* Sublinks */
.menu-vertical > ul.root > li.static > ul.static {
margin-top:5px; margin-bottom:5px;
}
.menu-vertical > ul.root > li.static > ul.static > li.static > a > span > span {
margin-top:2px
}
/* Selected */
.menu-vertical > ul.root > li.selected > a {
background-color:transparent!important;
border:0px; margin:0px; padding:0px;
}
.menu-vertical > ul.root > li.static > ul.static > li > a.selected {
background-image:none!important;
background-color:transparent;
color:green!important;
border:0px; margin-top:1px;
}
/* no border for the QL when no links */
.s4-specialNavLinkList {
border:0px
}
/* Liststyle square */
.s4-ql ul.root ul > li {
padding-top:0px;
background-image:url('/Style Library/WordPress/Images/Arrow-Right.png');
background-repeat:no-repeat;
background-position:0.0em;
}
/* Liststyle square links */
.s4-ql ul.root ul > li > a {
display: inline-block!important;
padding-top:0px;
padding-bottom:0px!important;
padding-left:0px!important;
margin-left:16px;
vertical-align:top!important;
}
Another example
If you want to display more levels in the Quick Launch you can set the display level to three, MaximumDynamicDisplayLevels=”3″ for the SharePoint Asp menu in the master page. Look for the menu control with the ID V4QuickLaunchMenu. In this example I have used list-style squares instead of the arrows.
Add this CSS in your custom CSS file:
/* |--------- 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;
}
/* mainlinks */
.menu-vertical > ul.root > li.static > .menu-item{
border-bottom:1px #555 solid!important;
padding-left:0px!important;
padding:1px!important;
color:#333!important;
}
/* Sublinks margins */
.menu-vertical > ul.root > li.static > ul.static {
margin-top:5px;
margin-bottom:5px;
}
/* Selected */
.menu-vertical > ul.root > li.selected > a {
background-color:transparent!important;
border:0px; margin:0px; padding:0px
}
.menu-vertical > ul.root > li.static > ul.static > li > a.selected {
background-image:none!important;
background-color:transparent;
color:green!important;
border:0px; margin-top:1px;
}
/* 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;
}
/* If 3 lvl in QL */
/* Wrapper for all Items in lvl 3 */
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.dynamic {
position:relative;
left:-8px!important;
top:1px!important;
padding-left:0px
}
/* Wrapp each Item in lvl 3 */
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.dynamic > li.dynamic {}
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.dynamic a:hover {}
.menu-vertical > ul.root > li.static > ul.static > li.dynamic-children > a.dynamic-children > span.additional-background {
background-image:none
}
/* Items in level 3*/
.menu-vertical > ul.root > li > ul > li > ul > li > a.selected > span > span {
padding-left:5px!important
}
/* Item lvl 3 - get all subItems from the last available DOM defined selected Item */
.menu-vertical > ul.root > li > ul > li.selected > ul > li > a > span > span {}
Read more about customizing the Quick Launch at MSDN library How to: Customize the Display of Quick Launch
In the next blog post I’ll show you some more examples how to customize the quick launch with stuff like rounded corner & borders and how to expand / collapse the Quick Launch with help of jQuery. Stay in tune!
/ Christian
Me & My SharePoint [FrontEnd] 
Excellent article. Thanks for sharing the code
Wonderful Article, Thanks
I’am a new developer in Sharepoint 2010. Can you show me in more details.
your statements like this:
Open SPD, create a custom master page and include a reference to an external CSS file. Paste the following CSS code in your custom CSS file. Save and publish the files and apply the master page to a site or your site collection. Use the browser and go to a site where you can see a Quick Launch to verify the changes.
I don’t know how to do it.
Thank you very much.
Hi Frank, and welcome to the world of SharePoint! There’s a lot of articles, books and blogs that cover this. A good place to start is at SharePoint Designer developer center. You can also take a look at this article I wrote for MSDN, look for the section called Creating a New Master Page and a New CSS File for Branding’
/ C
Was hung up on the selected nav item and a few snippets of your CSS saved me from banging my head on the keyboard some more. Thank you!
Ever notice that the “selected” css you’ve provided ignores links that are created by the end user via site actions –> site settings –> navigation –> “add link”?? Works like a charm on SharePoint GENERATED links such as libraries and lists though.
My issue is I have Document Sets inside a doc library and i’ve linked directly to them on the quick launch using “add link” under navigation. I would think it would treat them the same, but it does not. I’ve been looking at the html table nesting, but my eyes are crossing. Any ideas as to how to get the “selected link” (a.selected) to work in my scenario?
thanks!