Four Ways to Add or Remove the Quick Launch Menu Control

One topic that I routinely discuss with clients at the beginning of every branding project is navigation. The option of whether to use the Quick Launch menu often comes up. It's common for clients to say that they don't want the Quick Launch menu displayed on specific pages or sites yet have it displayed on all others.

There are four ways to add or remove the Quick Launch menu control from your SharePoint pages and sites. You can apply these techniques for other SharePoint controls as well. The techniques are:

Using the SharePoint Web Interface or SharePoint Designer 2010

The most straightforward option is to use the SharePoint web interface or SharePoint Designer 2010. It’s a valid option if you need to display or hide the Quick Launch menu across your entire site.

However, it's my least favorite option for a couple of reasons. First, this option needs to be manually set for each site that you want to change. You can’t apply it to an entire site collection, nor can you set subsites to inherit this type of action. Second, if you use this option to hide the Quick Launch menu, the Recycle Bin and All Site Content links still appear.

So, you need to add a Cascading Style Sheets (CSS) file to the site to remove the two links and remove the space that the Quick Launch menu originally occupied. Because this isn’t the best option for hiding the Quick Launch menu, I won’t it cover it here. Instead, I’ll just show you how to display the menu.

To display the Quick Launch menu using the SharePoint 2010 web interface, follow these steps:

Figure 1: Using the SharePoint web interface to add the Quick Launch menu

To display the Quick Launch menu using SharePoint Designer 2010, follow these steps:

Figure 2: Using SharePoint Designer 2010 to add the Quick Launch menu 
 

Using a Master Page

A popular option is to add or remove the Quick Launch menu in the master page to create consistency across all the pages within the site. This is a valuable option because you can choose to have all subsites inherit the master page used by its parent. This approach saves time because it can be applied to many sites at once and doesn’t require configuring each subsite individually. Plus, you can use the master page to create a uniform look across all sites within your site collection. If have to make other master page changes for your project, using the master page to change the Quick Launch setting is a great option. However, to use this option, you need to know how to create a custom master page, create a new CSS file, and reference the CSS file in the master page.

By default, the Quick Launch menu control is included in all the out-of-the-box SharePoint master pages. To remove the Quick Launch menu from a master page, you first need to create a hidden panel in your master page and put all Quick Launch menu–related content placeholders in that panel. Then, you need to add a CSS file to remove any unnecessary left-column spacing.

To see this technique firsthand, make a copy of the v4.master page and make the following changes to it:

1.     In the master page, locate the content placeholders listed in Figure 3. (They're located under the

tag that has the ID="s4-leftpanel" assigned to it.) Note that the content placeholder id="PlaceHolderCalendarNavigator" shows the date picker when you're looking at the calendar. If you decide to keep this, don't hide it in the master page.

2.     Create a hidden panel in your master page using the code
 

    content_placeholders

Replace content_placeholders with the content placeholders you located in step 1 by moving them from their original location to this location. You can delete all the code that was originally located inside of those placeholders. Save your master page and refresh your site.

3.     Although the Quick Launch menu no longer appears, the area where the Quick Launch menu was located is still visible, as Figure 4 shows. To remove this extra space, create a CSS file and insert the following:
 

#s4-leftpanel {  display:none;}.s4-ca {  margin-left:0px!important;}

Reference the CSS file in your master page. Depending on the page layout or text layout that you're using, you might need to adjust the margins of your page.

Using a Page Layout

Sometimes, organizations will want the Quick Launch menu displayed on most of their pages but not all of them. In this situation, it's effective to use the master page to handle the preferred scenario and use page layouts to handle the exceptions.

However, to use the page layout option, you need to know how to create a custom page layout, create a new CSS file, and reference the CSS file in the page layout. You also need to keep in mind that only publishing sites utilize page layouts.

If you're using a publishing site template that displays the Quick Launch menu, you can hide that menu on a specific page by using a page layout to override the Quick Launch menu control in the master page.

This is a popular option when an organization doesn't want the Quick Launch menu to appear on its home publishing page but wants the menu to appear on all other pages.

This scenario is so common that SharePoint provides an out-of-the-box page layout—WelcomeSplash.aspx—that overrides the master page and removes the Quick Launch menu. For every page that this page layout is applied to, the Quick Launch menu is hidden.

Although WelcomeSplash.aspx is convenient, many people find that it doesn’t fit their needs because it isn’t tailored to their content. So, here's how to hide the Quick Launch menu from a particular page using a custom page layout:

1.     Create a custom page layout and add the following empty content placeholder to your file:
 

This content placeholder corresponds with the same Quick Launch menu content placeholder in the master page.

2.     Although you've now removed the Quick Launch menu from the page, the area where the Quick Launch menu was located is still visible. To remove this extra space, create a CSS file and insert the following:
 

#s4-leftpanel {  display:none;}.s4-ca {  margin-left:0px!important;}

3.     Add the following content placeholder to your page layout, replacing yourcss.css with the name of CSS file you created in step 2:
 

Depending on the page layout or text layout that you're using, you might need to adjust the margins of your page.

If you want to hide the Quick Launch menu in most publishing pages and display it in only a few pages, you can keep the Quick Launch menu control visible in the master page, reference a CSS file in the master page that hides the Quick Launch

container, and reference a CSS file in your page layout that shows the Quick Launch menu. Here is the CSS code to show the Quick Launch menu:

#s4-leftpanel {  display:inherit!important;  width:155px!important;}.s4-ca {  margin-left:155px!important;}

Keep in mind that even though you're using a CSS file to hide the Quick Launch menu in the master page, if you view the source code for the web page in a browser, you'll see that the menu code is still in the page.

This is important to understand because text can still be read using page readers and the code that’s required for the Quick Launch menu will still be rendered in the browser when the page loads.

Using a Content Editor Web Part

If you're not using a publishing site template, but you'd like to leverage the benefits of using a page layout, you can use a Content Editor Web Part instead because you can use it in both publishing and nonpublishing pages.

For example, if your master page includes the Quick Launch menu control, but you want to hide it on a particular page, you can insert a Content Editor Web Part and reference a custom text file that includes the CSS to hide the Quick Launch menu. With this approach, you have control over individual pages. However, you need to have a technical understanding of Content Editor Web Parts and CSS.

To hide the Quick Launch menu using a Content Editor Web Part, follow these steps:

1.     Create a custom text file and insert the following CSS, which will hide the Quick Launch menu:
 

Save the file, naming it hideQuickLaunch.txt. Store the text file in the Style Library or on the server.

2.     Insert a Content Editor Web Part on the page in which you want to hide the Quick Launch menu. Edit the Web Part, entering the link to the hideQuickLaunch.txt file, as shown in Figure 5.

Figure 5: Using a Content Editor Web Part to hide the Quick Launch menu

The opposite can also be achieved. If most of your pages don’t need the Quick Launch menu, you can keep the Quick Launch menu code visible in the master page, hide it with CSS, insert a Content Editor Web Part, and reference a text file that includes CSS that will display the Quick Launch menu. Here is how to display the menu using a Content Editor Web Part:

1.     Create a custom text file and insert the following CSS, which will make the Quick Launch menu visible:
 

Save the file, naming it showQuickLaunch.txt. Store the text file in the Style Library or on the server.

2.   Insert a Content Editor Web Part on the page in which you want to hide the Quick Launch menu. Edit the Web Part, entering the link to the showQuickLaunch.txt file.

Which Option Is Best?

I’ve shown you four techniques to display or hide the Quick Launch menu control. Which option is best for your project? Figure 6 and Table 1 can help you decide. Figure 6 summarizes the pros and cons of each approach. The decision grid in Table 1 shows which techniques can help you meet certain criteria.

Figure 6: Knowing the pros and cons

As SharePoint veterans know, there’s typically more than one way to achieve an end result. However, you'll now be able to choose the right option for you when you need to add or remove the Quick Launch menu control or other types of controls in your SharePoint pages and sites.