Share via

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

  • Article

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