How to create a SharePoint 2010 web part page that inherits the site’s left navigation


The subject line says it all… if you create a web part page in SharePoint 2010, by default you will have a page that has the top (global) navigation, but no current navigation on the left.  This may be exactly what you want, as you will have a bit more space to work with.  If you want to show the current navigation on the left hand side of a web part page, here is how to do it:

image

  1. Go to the page that you want to add the left navigation to
  2. Go to Site Actions – and launch “Edit in SharePoint Designer”.  This will open the site in SharePoint Designer 2010.  You’ll need to navigate to the actual location where the web part page is (usually Site Pages). Open the page you want to edit.
    (standard disclaimer to edit a copy of your fancy web part page that your whole company depends on rather than editing the live original)
  3. Make a copy by right-clicking on the page, choosing copy, and then choosing paste
  4. Right-click on the (copy of) the page you are going to edit to add the left-nav, and choose Edit File in Advanced Mode
    image 
  5. Scroll to (or search for): body s4-leftpanel.  Once you find it, you’ll want to comment out the following code:
       1: <%-- <style type="text/css">
       2:  body #s4-leftpanel {
       3:     display:none;
       4: }
       5: .s4-ca {
       6:     margin-left:0px;
       7: }
       8: </style> --%>

    If you save and preview in browser, you’ll see we’ve made some progress, but we’re not quite there yet:

    image

  6. Scroll to (or search for): PlaceHolderNavSpacer and comment out the following two lines.

   1: <%-- 
   2: <asp:Content ContentPlaceHolderId="PlaceHolderNavSpacer" runat="server"></asp:Content>
   3: <asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"></asp:Content> 
   4: --%>

Save the page, preview in browser, and voila! Your current navigation is now on the left.  If you like the changes, rename your copy to the original filename and you are all set to go!

image

Comments (20)

  1. Anonymous says:

    Thanks Sean. We had to follow a similar set of steps for getting this to work in MOSS 2007. I wasn't sure if anything had changed in 2010, but looks like it hasn't.

    Wondering if there is a reason why we don't have an option to enable the left nav through the UI without going through a messy SPD edit….

  2. Jonathan Cochran says:

    This was perfect for what I am doing!  I am having another issue however that maybe you could address…I am using the nightandday.master page for my site and on two web part pages that I created, my logo at the top of the page does not display.  Do you have an advice?

  3. Lou T says:

    This was perfect.

    I found countless articles that I followed but flat out did not work.

    Thank you Sean

  4. Andy says:

    Very useful article, Thanks Sean.

  5. Eric Fang says:

    Thanks smearp, this saved me a lot of time!

  6. Randy says:

    I KNOW I've done this before in SP2010 and it worked perfectly, but had occasion to use this handy technique again today and no dice. New WebPart page, no content yet, comment the two lines, save it… no QuickLaunch…

    Did something change in SP2010 with recent CU or service pack for anyone else?

  7. Fabio says:

    Was exactly what I was looking for, thanks a lot man!

  8. Roby says:

    This is great!!! thank you very much Sean…

  9. H says:

    This did the trick! Thanks so much :)

    Would add though that I was working with the Adventure Works Master Page, so in Step 6, I had to remove the lines instead of just commenting them out.

  10. Milevski says:

    Thanks for the post :)

    Anyway I can set this as default for every new web part page I create?

  11. Brett says:

    I work with the government and we can't user SharePoint Designer to do anything.  Is there a way to do this out of the box?  

    I've looked everywhere for the answer.

  12. Sri Harsha Tadakamalla says:

    don't comment out the ASP Content Place Holders… just remove them.. If you leave them in comments section.. page is giving errors like:

    "C# Preprocessor directives must appear as the first non-whitespace character on a line" .. etc.

  13. Lesley Kelk says:

    Worked great – thanks

  14. Elia says:

    Works great !!

  15. person says:

    THANK YOU SO MUCH FOR PUTTING THIS INFO ON THE INTERNET!

  16. Very awesome says:

    Worked Perfectly!!

  17. Karina says:

    I have very beautiful and very sexy body Models , I can provide you best escort service during your trip in Dubai. I’m a 100% Independent escort girl with /100% Real Pictures, you will be crazy with my service, if you are interested in my special service,
    you can give me a call, I can provide both outcall and incall service.
    VIP Escorts in Dubai
    , Escorts in Dubai,
    VIP Escorts ,
    Call Girl
    , Massage

  18. nike air max shoes says:

    nike air max shoes
    http://www.nikeairmaxretro.com/">nike air max
    http://www.nikeairmaxhyperfuse.com/nike-air-max-90-c-8.html">Nike Air Max 90
    http://www.nikeairmaxhyperfuse.com/nike-air-max-tumblr-c-10.html">nike air max tumblr
    http://www.nikeairmaxretro.com/">nike air max for mens
    http://www.nikeairmaxretro.com/">nike air max for womens
    http://www.nikeairmaxretro.com/">air max shoes
    http://www.nikeairmaxhyperfuse.com/nike-air-max-1-hyperfuse-c-1.html">Nike Air Max 1 Hyperfuse
    http://www.nikeairmaxhyperfuse.com/nike-air-max-for-women-c-9.html">nike air max for women
    http://www.nikeairmaxretro.com/">nikeairmaxretro.com
    http://www.nikeairmaxretro.com/mens-nike-air-max-c-4.html">mens nike air max
    http://www.nikeairmaxretro.com/nike-air-max-90-womens-c-5.html">nike air max 90 womens
    http://www.nikeairmaxhyperfuse.com/">air max hyperfuse shoes
    http://www.nikeairmaxhyperfuse.com/">nike air max 2015
    http://www.nikeairmaxretro.com/nike-air-max-black-c-7.html">nike air max black
    http://www.nikeairmaxretro.com/white-nike-air-max-90-c-10.html">white nike air max 90
    http://www.nikeairmaxhyperfuse.com/">nike air max hyperfuse

    http://www.nikeairmaxhyperfuse.com/">nike air max shoes for womens
    http://www.nikeairmaxhyperfuse.com/">air max shoes
    http://www.nikeairmaxhyperfuse.com/nike-air-max-1-hyperfuse-c-1.html">Nike Air Max 1 Hyperfuse
    http://www.nikeairmaxhyperfuse.com/nike-air-max-for-women-c-9.html">nike air max for women
    http://www.nikeairmaxhyperfuse.com/nike-air-max-shoes-c-12.html">nike air max shoes
    http://www.nikeairmaxhyperfuse.com/nike-air-max-90-c-8.html">Nike Air Max 90
    http://www.nikeairmaxhyperfuse.com/nike-air-max-tumblr-c-10.html">nike air max tumblr

  19. wlp says:

    http://www.christianlouboutinshoes.jp.net/
    http://www.coachfactory-outlet.co.com/
    http://www.coachfactoryoutletonline.co.com/
    http://www.coach-handbags.com.co/
    http://www.coachoutlet-online.com.co/
    http://www.coachoutletstore.net.co/
    http://www.coachoutletstore-online.com.co/
    http://www.coco-chanelbags.com.co/
    http://www.converse.net.co/
    http://www.designerhandbagsoutlet.com.co/
    http://www.eyeglassesonline.us.com/
    http://www.eyeglassframes.us.com/
    http://www.fashion-clothing.us.com/
    http://www.ferragamo.com.co/
    http://www.ferragamoshoes.net/
    http://www.ghdhairstraightener.com.co/
    http://www.gucci.me.uk/
    http://www.guccihandbags.com.co/
    http://www.gucci-outlet.in.net/
    http://www.gucci–outlet.in.net/
    http://www.guccishoes.net.co/
    http://www.guccishoes.us.org/
    http://www.hermesbags.com.co/
    http://www.hermesbirkin.com.co/
    http://www.hermesoutlet.net.co/
    http://www.hollister.us.org/
    http://www.hollisterclothing-store.in.net/
    http://www.insanityworkout.net.co/
    http://www.iphone-cases.us/
    http://www.jimmychoo.net.co/
    http://www.jordanretro.org/
    http://www.jordan-shoes.com.co/
    http://www.juicycouture.com.co/
    http://www.juicycoutureoutlet.net.co/
    http://www.kate-spade.com.co/
    http://www.katespade-outlet.com.co/
    http://www.kate-spades.com/
    http://www.longchamp.us.org/
    http://www.longchamp.com.co/
    http://www.louboutin.jp.net/
    http://www.louis–vuitton.ca/
    http://www.louisvuitton.jp.net/
    http://www.louis–vuitton.org.uk/
    http://www.louisvuitton.so/
    http://www.louisvuittonas.com/
    http://www.louisvuitton-outlet.com.co/
    http://www.louisvuitton-outlets.us/
    http://www.marcjacobsonsale.com/
    http://www.mcm-bags.net/
    http://www.mcmhandbags.com.co/
    http://www.michaelkors.so/
    http://www.michael–kors.us.com/
    http://www.michaelkorsbags.us.org/
    http://www.michaelkorshandbags.org.uk/
    http://www.michael-kors-handbags.us.com/
    http://www.michaelkorsoutlet.ar.com/
    http://www.michael-kors-outlet.us.org/
    http://www.michaelkorsoutlet-online.ar.com/
    http://www.michael-kors-outlet-online.us.org/
    http://www.michaelkorsoutletonline-sale.us.com/
    http://www.michaelkors-uk.org.uk/
    http://www.montblanc–pens.net/
    http://www.newbalance-outlet.org/
    http://www.nike-air-max.us/
    http://www.nikefactory.org/
    http://www.nikefree5.net/
    http://www.nikefree-run.net/
    http://www.nikefree-run.org.uk/
    http://www.nike-jordanshoes.com/
    http://www.nikemercurial.net/
    http://www.nikerosherun.us/
    http://www.nikestore.us/
    http://www.northface.us.org/
    http://www.northfaceoutlet.com.co/
    http://www.oakleyoutlet.us.org/
    http://www.oakley-sunglasses.us.org/
    http://www.oakleysunglassescheap.in.net/
    http://www.oakleysunglassesoutlet.com.co/
    http://www.omegawatches.us.com/
    http://www.pandora-charms.org.uk/
    http://www.pandorajewelry.com.co/
    http://www.polo-outlets.com/