Adding a Left Navigation Menu in a Page Layout

Sometimes you are presented with a SharePoint design and you think, yeah that will work just fine. Once you have the design in hand and start the branding process you come across an issue that you didn’t give enough thought to on how it might be implemented in SharePoint.

I love these little gotcha moments! They offer and opportunity to try something new in SharePoint.

This gotcha was when the left navigation in the design was in an awkward position in the page layout. The navigation on this page had zones above, below and to the right. Some might say you could create a second master page to accommodate the layout, but I am not a fan of multiple master pages on a site, it seems overkill for a simple solution.

To make this work I just needed to add a Left Navigation Menu in my page layout, hiding the Left Navigation Area in the master page.

page-layout-zones

After creating the page layout I added the following code in the section where my Left Navigation was supposed to live.

<sharepoint:AspMenu
ID="homeLeftNav"
EnableViewState="false"
DataSourceId="QuickLaunchSiteMap"
UseSimpleRendering="true"
Orientation="Vertical"
StaticDisplayLevels="3"
AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="0"
SkipLinkText="" CssClass="nav"
runat="server">
</SharePoint:AspMenu>
<PublishingNavigation:PortalSiteMapDataSource
ID="QuickLaunchSiteMap"
SiteMapProvider="SPNavigationProvider"
ShowStartingNode="false"
StartingNodeUrl="sid:1025"
runat="server"/>

ln-code

That was it, now our designer is happy that she didn’t have to redesign a landing page over a simple menu placement.

  • spMuttGirl

    Hi Heather,
    love your posts, and regarding the left hand navigation above, is it quite similar to apply this to a SharePoint 2010 page layout?

    • hwaterman

      I have not tried, but I am sure it should be similar. If you try it out let me know if it works for you.