How to: Customize the Display of Quick Launch

Article
05/05/2014

This content is outdated and is no longer being maintained. It is provided as a courtesy for individuals who are still using these technologies. This page may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

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"

  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"

  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 SPWeb.MasterUrl property to point the site to the custom .master file, as shown in the following example.
```
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.

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

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 

  id="MyTreeViewRememberScroll" 
  onscroll="javascript:_spRecordScrollPositions(this);" 
  Style="overflow: auto;height: 400px;width: 150px; ">
  <Sharepoint:SPTreeView
    id="MyWebTreeView"

    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.

Share via

How to: Customize the Display of Quick Launch

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

Concepts

Additional resources