Switch View

How to: Customize the Display of Qu...

Community Content

In this section

Statistics Annotations (5)

Click here to expand

Language Filter

This page is specific to

The 2007 product release

Other versions are also available for the following:

The 2010 product release

How to: Customize the Display of Quick Launch

You can modify the display of Quick Launch by modifying attributes of the navigation control specified in the default.master file of the deployment (Local_Drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\GLOBAL). The default.master file is the Windows SharePoint Services master page that contains templates for site page layout, including the template for the left navigational area used in SharePoint pages.

The master page includes templates for two controls that by default are available for implementation on the Home page, a Microsoft.SharePoint.WebControls.Menu control, which displays the standard Quick Launch view used in the left navigational area, and a Microsoft.SharePoint.WebControls.SPTreeView control, which displays a site folder view. You can select which view to display on site pages through the user interface.

To select which left navigational control to display on site pages

Click Site Actions and on the Site Settings page in the Look and Feel section, click Tree view.
Select Enable Quick Launch to display the Quick Launch view, or select Enable Tree View to display a folder view.

As an example of a customization that you can make to left navigation, you can collapse Quick Launch and add fly-out menus to the view by setting attributes on the Menucontrol. This kind of customization requires that you either customize the originally installed default.master file through a SharePoint-compatible editing application such as Microsoft Office SharePoint Designer 2007, or that you create a custom .master file and use the Windows SharePoint Services object model to point a site to the new file.

To use SharePoint Designer to modify the default.master file instance in the site's Master Page Gallery to display a collapsed view with fly-out menus

Click Site Actions, click Site Settings, and then in the Galleries section of the Site Settings page, click Master pages.
On the Master Page Gallery page, click Edit in Microsoft Office SharePoint Designer on the drop-down menu.
In Code view, find the ContentPlaceHolder container control whose ID is PlaceHolderLeftNavBar. Within the PlaceHolderLeftNavBar control, find the AspMenu control whose ID is QuickLaunchMenu.

Set both the StaticDisplayLevels and MaximumDynamicDisplayLevels values of the Menu control to 1, as follows:

<asp:AspMenu
  id="QuickLaunchMenu"
  DataSourceId="QuickLaunchSiteMap"
  runat="server"
  Orientation="Vertical"
  StaticDisplayLevels="1"
  ItemWrap="true"
  MaximumDynamicDisplayLevels="1"
  StaticSubMenuIndent="0"
  SkipLinkText=""
>

Save the file and open a site page to see the results of your changes.

To display a collapsed view with fly-out menus by creating a custom .master file and using the SharePoint object model

Copy the default.master file in the \12\TEMPLATE\GLOBAL folder and rename it, for example, myDefault.master.
Open your new myDefault.master file and find the ContentPlaceHolder container control whose ID is PlaceHolderLeftNavBar.

In the PlaceHolderLeftNavBar control, find the AspMenu control whose ID is QuickLaunchMenu, and then set both the StaticDisplayLevels and MaximumDynamicDisplayLevels values to 1, as follows:

<asp:AspMenu
  id="QuickLaunchMenu"
  DataSourceId="QuickLaunchSiteMap"
  runat="server"
  Orientation="Vertical"
  StaticDisplayLevels="1"
  ItemWrap="true"
  MaximumDynamicDisplayLevels="1"
  StaticSubMenuIndent="0"
  SkipLinkText=""
>

To upload your myDefault.master file to the Master Page Gallery, click Site Actions, click Site Settings, and in the Galleries section, click Master Pages. Click Upload on the Master Page Gallery page to browse to your myDefault.master file and upload it to the gallery.
Create a Web site in Microsoft Visual Studio and use the Microsoft.SharePoint.SPWeb.MasterUrl property to point the site to the custom .master file, as shown in the following example.
C#
```
SPWeb oWebsite = SPContext.Current.Site.AllWebs["MyWebSite"];
oWebsite.MasterUrl = "/MyWebSite/_catalogs/masterpage/myDefault.master";
oWebsite.Update();
oWebsite.Dispose();
```
To run this example, you must add a Microsoft.SharePoint.WebControls.FormDigest control to the page that makes the post. For information about how to add a FormDigest control, see Security Validation and Making Posts to Update Data. The example also requires referencing and importing the Microsoft.SharePoint and Microsoft.SharePoint.WebControls namespaces. For basic information about how to create a Web application that runs in the context of Windows SharePoint Services, see How to: Create a Web Application in a SharePoint Web Site.
Reset IIS for your changes to take effect and navigate to a site page to see the results of your changes.

Replacing the Menu Control with the TreeView Control

You can replace the AspMenu control with a SPTreeView control to display a familiar tree view with nodes that collapse and expand.

To replace the Menu control with the TreeView control

Copy the default.master file in the \12\TEMPLATE\GLOBAL folder and rename it, for example, myDefault.master.
Open your new myDefault.master file and find the ContentPlaceHolder container control whose ID is PlaceHolderLeftNavBar.
In the PlaceHolderLeftNavBar control, find the AspMenu control whose ID is QuickLaunchMenu.

Replace the AspMenu with an SPRememberScroll control that contains an SPTreeView control, such as the following example, which specifies that hierarchical outlines be displayed, expands the top three nodes by default, and increases vertical padding and indentation between node levels:

<SharePoint:SPRememberScroll 
  runat="server" 
  id="MyTreeViewRememberScroll" 
  onscroll="javascript:_spRecordScrollPositions(this);" 
  Style="overflow: auto;height: 400px;width: 150px; ">
  <Sharepoint:SPTreeView
    id="MyWebTreeView"
    runat="server"
    ShowLines="true"
    DataSourceId="TreeViewDataSource"
    ExpandDepth="3"
    SelectedNodeStyle-CssClass="ms-tvselected"
    NodeStyle-CssClass="ms-navitem"
    NodeStyle-HorizontalPadding="2"
    NodeStyle-VerticalPadding="5"
    SkipLinkText=""
    NodeIndent="20"
    ExpandImageUrl="/_layouts/images/tvplus.gif"
    CollapseImageUrl="/_layouts/images/tvminus.gif"
    NoExpandImageUrl="/_layouts/images/tvblank.gif">
  </Sharepoint:SPTreeView>
</Sharepoint:SPRememberScroll>

To upload your myDefault.master file to the Master Page Gallery, click Site Actions, click Site Settings, and in the Galleries section, click Master Pages. Click Upload on the Master Page Gallery page to browse to your myDefault.master file and upload it to the gallery.
Run a code sample as in step five of the previous procedure to set myDefault.master as the .master file for a specified Web site.
Reset IIS for your changes to take effect and navigate to a site page to see the results of your changes.

<Sharepoint:SPNavigationManager
id="TreeViewNavigationManager"
runat="server"
ContainedControl="TreeView">
<table class="ms-navSubMenu1" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table class="leftNav" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td nowrap id="idSiteHierarchy">
<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/_layouts/create.aspx" id="idNavLinkSiteHierarchy" Text="View All Site Content" AccessKey="<%$Resources:wss,quiklnch_allcontent_AK%>" CssClass="leftNav2" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="ms-treeviewouter">
<SharePoint:SPHierarchyDataSourceControl runat="server" id="TreeViewDataSource" RootContextObject="Web" IncludeDiscussionFolders="true" />
<SharePoint:SPRememberScroll runat="server" id="TreeViewRememberScroll" onscroll="javascript:_spRecordScrollPositions(this);" Style="overflow: auto;height: 400px;width: 150px; ">
<SharePoint:SPTreeView id="WebTreeView" runat="server" ShowLines="true" DataSourceId="TreeViewDataSource" ExpandDepth="0" SelectedNodeStyle-CssClass="leftNavSelected" HoverNodeStyle-CssClass="leftNavHover" NodeStyle-CssClass="leftNav2" NodeStyle-HorizontalPadding="2" SkipLinkText="" NodeIndent="12" ExpandImageUrl="/_layouts/images/tvplus.gif" CollapseImageUrl="/_layouts/images/tvminus.gif" NoExpandImageUrl="/_layouts/images/tvblank.gif">
</SharePoint:SPTreeView>
<SPLinkButton runat="server" NavigateUrl="~site/_layouts/recyclebin.aspx" id="idNavLinkRecycleBin" ImageUrl="/_layouts/images/recycbin.gif" Text="<%$Resources:wss,StsDefault_RecycleBin%>" PermissionsString="DeleteListItems" CssClass="leftNav2" />
</SharePoint:SPRememberScroll>
</div>
</Sharepoint:SPNavigationManager>

I hope, this content will be useful for many users, who are trying to customize the quick-launch in Master Page to Tree View.

To select which left navigational control to display on site pages

To use SharePoint Designer to modify the default.master file instance in the site's Master Page Gallery to display a collapsed view with fly-out menus

To display a collapsed view with fly-out menus by creating a custom .master file and using the SharePoint object model

Replacing the Menu Control with the TreeView Control

To replace the Menu control with the TreeView control

See Also

Other Resources