Most pages on your SharePoint site display a left navigation, also known as “Quick Launch”. However, new Web Part pages that you add through the Create menu do not have it.
So how can we add the Quick Launch to these pages, using only the SharePoint UI? Here again, the iframe can help. On our Web Part page we are going to:
1/ load the site home page in the background
2/ extract the Quick Launch
3/ include it in our page
4/ do some cleanup to avoid conflicts with the rest of the page
This is very similar to the method I described to display a list in another site – just here everything happens within the same site.
Here is the code, simply add it to the page through a CEWP:
<!-- Load and display Quick Launch - iframe version -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->
<!-- Paste the URL of the source page below: -->
<iframe id="SourcePage" style="display:none;" src="http://[YourSite]/default.aspx" onload="DisplayQuickLaunch()"></iframe>
<script type="text/javascript">
function DisplayQuickLaunch()
{
var placeholder = document.getElementById("LeftNavigationAreaCell");
var quicklaunchmenu = null;
var SourcePage = document.getElementById("SourcePage");
try {
if(SourcePage.contentDocument)
// Firefox, Opera
{quicklaunchmenu = SourcePage.contentDocument.getElementById("LeftNavigationAreaCell") ;}
else if(SourcePage.contentWindow)
// Internet Explorer
{quicklaunchmenu = SourcePage.contentWindow.document.getElementById("LeftNavigationAreaCell") ;}
else if(SourcePage.document)
// Others?
{quicklaunchmenu = SourcePage.document.getElementById("LeftNavigationAreaCell") ;}
}
catch(err) { alert ("Loading failed");}
var allDescendants = quicklaunchmenu.getElementsByTagName("*");
for (i=0;i<allDescendants.length;i++) {
allDescendants[i].removeAttribute("id");
allDescendants[i].removeAttribute("onclick");
allDescendants[i].removeAttribute("onfocus");
allDescendants[i].removeAttribute("onmouseover");
}
placeholder.innerHTML = quicklaunchmenu.innerHTML;
}
</script>
For better performance…
In my code sample, the source page is the home page, but you can actually select any other page from your site that has the Quick Launch. Pick a page with little content for better performance.
Update [05/29/2009] As Cory mentioned in the comments section, here is another approach if you have SharePoint Designer:
http://www.u2u.info/Blogs/Patrick/Lists/Posts/Post.aspx?ID=1744

21 comments
Comments feed for this article
February 4, 2009 at 2:52 pm
robyn
Hi Christophe,
I modified my Quick Launch to show the second-level links in flyout menus (second method at http://msdn.microsoft.com/en-us/library/ms466994.aspx).
The flyout menus don’t display properly with your code sample. Is there a way I can modify it so the flyouts work here?
Thanks!
robyn
February 5, 2009 at 12:30 am
larry
robyn, your issue is most likely related to the fact that the quick launch is displayed in an iframe. I have had many of troubles with navigation and frames. I am not sure that christophe script is the problem. Because by default the quick lauch does not reside in frames, that author did not design the script to take that into consideration.
February 5, 2009 at 2:01 am
Christophe
Larry: with this method, the Quick Launch is pulled from the iframe and actually displayed in the page itself (steps 2 and 3 in the post). This is the key difference with other methods that only embed an iframe in the page.
The current script only keeps the hyperlinks in the transfer, which is enough for a standard Quick Launch. To make it work in Robyn’s case we’ll also need to transfer ids and event handlers. Working on this…
February 5, 2009 at 9:30 pm
Links for February 5, 2009 « Steve Mullen’s Blog
[...] Display the Quick Launch in a Web Part page from Path to SharePoint [...]
February 19, 2009 at 1:47 am
mike
I’m embarrased to admin but want to know what I’m missing in the 4 steps. Is IFrame something that my WSS3.0 already has installed or do I need to get that before this code will do anything?
Oh, and Blank Stare on my part to the 2nd item “extract the Quick Launch”.
I’m honestly not slaming anyone and mean this as a complement; but you guys are so frigen smart and have forgotten what it’s like to be learning something for the first time. But I did use your Calendar Code and absolutely love my tiny calendar. I’ve wanted that for years.
Thank you.
February 19, 2009 at 3:06 am
Christophe
Hi Mike,
I have to admit that I was very concise on this post (what a nice way to put it
)
However, please understand that a post has limited space, and I can’t go all the way from the basics to the original solution I propose.
For example, when I talk about the CEWP, I just link back to another post that provides more details. For concepts that are not even SharePoint specific, like the iframe, you’ll need to turn to HTML tutorials, like w3schools:
http://www.w3schools.com/
The nice part is that I provide ready to use samples. So you can start using the solution now and understand it later.
That’s how I started myself…
April 7, 2009 at 12:01 am
owen
Thanks – great post
One question – how do I get rid of the breadcrumb trail in the page that points back to the source library/item that is being displayed?
Thanks
July 17, 2009 at 2:03 pm
Vivian
Hi Owen,
I have been going through most of the CEWPs in your link below as I am keen on removing the library reference in my breadcrumb (not the whole breadcrumb), but cannot find the “hide references” one you are referring to.
Also the above source code worked like a charm, but I must be doing something wrong with the implementation of the others as I am constantly getting the error message “cannot import”.
Would you mind lending me a hand by:
- giving me the exact name of the CEWP that you have used for the breadcrumb
- and advising me where you had to modify the code (if necessary) for it to work?
Thank you so much & best regards,
Vivian
July 17, 2009 at 9:38 pm
Vivian
Hi,
Just figured out what I was doing wrong – I was copying the full code which is probably intended for the sharepoint design users. I am afraid that I am restricted to purely the GUI and therefore it works only for me when inserting the … area (in case anybody has the same dopey brainwave at me and is trying to work out why it doesn’t work
)
My question still stays open though as far as the request for a CEWP that removes the document library from the breadcrumb. At the moment I only found CEWPs that remove the entire breadcrumb.
Thanks for all help that you guys can give me & best regards,
Vivian
April 8, 2009 at 6:04 am
owen
found hide references here http://www.contenteditorwebpart.com/cewpsforuse/default.aspx
- thanks again
April 8, 2009 at 8:04 am
Christophe
Thanks for the link owen!
May 22, 2009 at 2:25 pm
Rod
What a great, quick solution – thaks very much for posting!
May 28, 2009 at 9:12 pm
Cory Langner
I know that you specify “using only the SharePoint UI”, but I think it’s important to point out that the Quick Launch menu *IS* actually present on a web part page. The page layout for the default web part pages you create in SharePoint override the default ContentPlaceHolders from the master page – you just need to remove those empty ContentPlaceHolders. It’s a quick and easy modification in SharePoint Designer – no need to use iFrames, and those flyout menu options will now work without any messy transfer IDs and event handlers.
Here are the content placeholders I delete:
PlaceHolderLeftActions
PlaceHolderPageDescription
PlaceHolderBodyRightMargin
PlaceHolderPageImage
PlaceHolderLeftNavBar
PlaceHolderNavSpacer
May 29, 2009 at 12:10 am
Christophe
Cory: yes, I specified “only using the SharePoint UI”. I know that times are changing, but this post was written at a time when SPD was not free. Even today, many users don’t have the right to use it in their environment.
And even if allowed, unghosting pages just to add a couple Quicklaunch bars is not necessarily the best option. So my point of view is: it’s an easy iframe/CEWP, no need to use SPD.
That said, people should be aware of the SPD option, so I’ll add a link to a post that explains it.
Thanks for alerting me on messy ids and event handlers, I’ll take a closer look. Maybe I actually need to remove them, like I did in other scripts.
June 1, 2009 at 5:30 pm
Fuad
Hi,
I hwave two questions:
1. I’d like to know if there’s a way to assign a link to a document library using stsadmin?
2. I’d like to know if there’s a way to add a document library webpart to a site using stsadmin?
I am running WSS 3.0.
Any assistence will be appreciated.
Thanks,
Fuad
June 1, 2009 at 11:50 pm
Christophe
Fuad, I must confess I know nothing about stsadmin. This is an end user site. Try to post your question on the MSDN forums.
July 17, 2009 at 4:00 pm
Vivian
Cristophe, thank you very much for the solution on how to get the left-hand nav appearing on a web part page – I am still clueless why they would have decided to not have that appear in the first place!?!? But this works like a charm, so thanks!
One thing I have noticed though is that it seems to be pushing my left-hand nav downwards, i.e. it’s no longer beginning at the top. The space that is inserted in the left-hand nav is the height of the breadcrumb and the page title of the content page. Is there any way to get the left-hand nav to start at the top of the column?
Thanks in advance & best regards,
Vivian
August 20, 2009 at 5:40 pm
sandesh
Hi ,
i have customized the quick launch by modifying the code in the default.master page using sharepoint designer 2007. after that only the list item are collapsed but i am not able to view the sub contents in a list item in quick launch.. how can i view the sub links under quick launch..expecting ur reply asap.
thanks
sandesh
June 12, 2010 at 12:28 pm
Display the Quick Launch in a Web Part page « Path to SharePoint | Intenseblog.com
Display the Quick Launch in a Web Part page « Path to SharePoint…
…h is displayed in an iframe. I have had many of troubles with navigation and frames. I am not sure that christophe script is the problem. Because by default the quick lauch … Larry: with this method, the Quick Launch is pulled from the iframe and …
July 29, 2010 at 4:18 pm
Isaac
I copied the url into the code but it did absolutely nothing to
the page. Is there something else I am supposed to modify?
July 30, 2010 at 1:45 am
Christophe
For some reason, one line of the code was not displayed. It should be ok now.
Isaac, you need to copy your URL in the src attribute of the iframe.