SharePoint Customization: Customizing The Quick Launch Bar

I have been in email conversation today with someone on SharePoint Portal Server 2003 customization. The conversation quickly turned to the limitations of SharePoint’s architecture in regards to a more friendly CSS based layout.

I decided rather than limiting the conversation to a single email I would create a blog post on it and share it with everyone.

In this example I will show you how you can modify the table based layout which is outputted for the Quick Launch Navigation (Side Bar) and replace it with a more friendly and easy to style HTML list. This is a complete overhaul of how the quick launch is rendered out.

If you duplicate a site definition like STS and take a look the default code that is used to render this navigation you will find a category title for the link, a server control that renders out all the new elements created that match that category.

This is what actually renders that navigation menu

Note: In an effort to save you from going boogy eyed I am including only one of the headings which is included. Each heading in the site definition has the same thing with a different base type specified.

<TABLE CELLPADDING=1 cellspacing=0 BORDER=0 width=126px style="margin-right: 3px">
<TR><TD class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/
viewlsts.aspx?BaseType=1">Documents</A></TD></TR>
<TR><TD style="height: 6px"><!–webbot bot="Navigation" S-Btn-Nobr="FALSE" S-Type="sequence" S-Rendering="html" S-Orientation="Vertical" B-Include-Home="FALSE" B-Include-Up="FALSE" U-Page="sid:1004" S-Bar-Pfx="<table border=0 cellpadding=4 cellspacing=0>" S-Bar-Sfx="</table>" S-Btn-Nml="<tr><td><table border=0 cellpadding=0 cellspacing=0><tr><td><img src=’_layouts/images/blank.gif’ ID=’100′ alt=’Icon’ border=0>&amp;nbsp;</td><td valign=top><a ID=onetleftnavbar#LABEL_ID# href=’#URL#’>#LABEL#</td></tr></table></td></tr>" S-Target TAG="BODY" startspan –><SharePoint:Navigation LinkBarId="1004" runat="server"/><!–webbot bot="Navigation" endspan –></TD></TR>

Ok so lets tear it up

It can be broken down fairly easily. There are basically two rows. Row 1 has the title and Row 2 renders the links which go under that title.

The above example is the Documents heading. When this renders out on the page it shows Documents, and then renders all the document libraries you create in a table under it.

If you look closely you can see all the things we talked about above like the server control, web bot etc. but what is really important in here is the title, and the links.

Great now we know whats behind it, let’s replace it with something more fun.

One of the better things you can use for navigation is an HTML list. Doesn’t sound very fun I know but once you have this base you can style it to your hearts content and it’s much easier to look at, manage and deal with.

A basic html list looks like this:

<ul>
<li></li>
</ul>

What we’re going to do here is remove the entire Web Bot Table rendering and leave us only the meat of what we are after.

The very basicsof what is rendered out into tables can be stripped down to this:

<A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/
viewlsts.aspx?BaseType=1">Documents</A>
<SharePoint:Navigation LinkBarId="1004" runat="server"/>

That leaves you with your title (Documents in this case) and the server control that will render out a link for each document library that is created. You will need to do the same for each of the titles (Picture Libraries, Lists etc).

From there you can pop these items into a simple HTML list which can then be styled to your liking.

This has been one example of how you can make the base code easier to manage by stripping out the tables that are rendered out and replacing them with more sensible markup.

This is a snippet of code from a site definition I created which replaces the entire quick launch navigation structure:

<!– Render the side navigation/quick launch into a div –>
<div class="sidebar">
<!– List based quick launch –>
<ul class="quicklaunch">
<li class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>
/viewlsts.aspx?BaseType=1">Documents</A></li>
<li><SharePoint:Navigation LinkBarId="1004" runat="server"/></li><li class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture
.LCID%>/viewlsts.aspx?BaseType=1&ListTemplate=109">Pictures</A></li>

<li><SharePoint:Navigation LinkBarId="1005" runat="server"/></li><li class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/
viewlsts.aspx?BaseType=0">Lists</A></li>
<li><SharePoint:Navigation LinkBarId="1003" runat="server"/></li><li class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/
viewlsts.aspx?BaseType=3">Discussions</A></li>
<li><SharePoint:Navigation LinkBarId="1006" runat="server"/></li><li class="ms-navheader"><A HREF="_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/
viewlsts.aspx?BaseType=4">Surveys</A></li>
<li><SharePoint:Navigation LinkBarId="1007" runat="server"/></li>
</ul>
<!– End List based quick launch –>
</div>
<!– End Render the side navigation into a div –>

A couple of quick tips:
Try to keep your class/id names consistent with what Microsoft has named them. This will come in particularly handy if a theme is applied, for example: the “Titles have the class ms-navheader”.

The form runat=server which is on the page must come ‘after’ the quick launch menu, otherwise it will toss you a code block error.

To avoid headaches, create a class and apply it to the list. In the class make sure you remove padding, margins and list-style.

Example:

.quicklaunch {
padding:0;
margin:0;
list-style:none;
}

That about wraps it up. Happy customizing :)

This entry was posted in SharePoint. Bookmark the permalink.

2 Responses to SharePoint Customization: Customizing The Quick Launch Bar

  1. Milan says:

    Spiffy, still not loving customizing sharepoint though :P

    Thanks again man.

    (m.)

  2. Brian Stone says:

    Can this be done with the TOP ROW too? My top row is WAY too wide for people and they want it in two rows…

    Brian