By: Rob Fisch | Comments | Related: > Sharepoint Design
Problem
SharePoint security trimmed navigation like Global and Current Navigation and the Quicklaunch (where objects and links only appear to a user when they have permission access) are great features. But at times these are limiting (i.e. cannot do multilevel nesting out of the box). Sometimes I don't care about security trimming and I just want to have a plain old multilevel navigation tree without having to download some 3rd party javascript (that is usually nasty to maintain).
Solution
SharePoint Designer to the rescue!
Yes, you can make a multi level navigation tree menu with (out of the box) tools built into SharePoint Designer.
Briefly, we will make a document library to store my code, use SharePoint Designer to create an aspx file with a multi level tree menu, then use a Page Viewer Web Part to display the menu on one or more web site home pages.
Here's how to do it in SharePoint 2010 with SharePoint Designer 2010.
Create a Document Library to store the code for your menu.
From the "Site Actions" menu, click "New Document Library".
![new document library](/tipimages_sharepoint/3853_01-CreateLibrary.jpg)
Give your library a name. Navigation is not warranted. Version History is optional. A Document Template is not needed.
![document library](/tipimages_sharepoint/3853_02-LibraryOptions.jpg)
Creating the Tree Menu With SharePoint Designer 2010
Start SharePoint Designer 2010 from the Site Actions menu in the site where you library is.
![site actions](/tipimages_sharepoint/3853_03-StartSPD.jpg)
Click on "All Files" and navigate to the new library. Right click in the white space under the Forms folder and select "New", then "ASPX".
![all files](/tipimages_sharepoint/3853_04-NewASPX.jpg)
Rename the ASPX file to something appropriate.
![menu](/tipimages_sharepoint/3853_05-GiveNameToFile.jpg)
Double click on the file, and then click the "Edit File" link under "Customization". (There are other ways to edit the file. Use your own method if you like.)
![edit file](/tipimages_sharepoint/3853_06-ClickEditFile.jpg)
You will get prompted to open the page in "Advanced Mode". Click "Yes".
![sharepoint designer](/tipimages_sharepoint/3853_07-AdvancedModePrompt.jpg)
Your cursor should start within the <form> tag. But if you want to be sure and a could of line breaks and put your cursor in between the tags.
![doctype](/tipimages_sharepoint/3853_08-MakeSpaceInFormSection.jpg)
From the "Insert" Tab, select "ASP.NET". In the "Navigation" section (scroll down), select "TreeView".
![placeholder](/tipimages_sharepoint/3853_09-InsertASPXTreeView.jpg)
Notice in the code window how the treeview is added...
![tree view](/tipimages_sharepoint/3853_10-InitialCode.jpg)
In "Design", select the new Treeview object and then click on the options menu (> sign) highlighted below.
![root](/tipimages_sharepoint/3853_11-EditNodes.jpg)
In "Common TreeView Tasks", click "Edit Nodes..."
![edit nodes](/tipimages_sharepoint/3853_12-EditNodes.jpg)
To add a top level menu, click the first button on the left (hightlighted below),
![treeview node editor](/tipimages_sharepoint/3853_13-AddRootNode.jpg)
Enter text for the menu option.
![value](/tipimages_sharepoint/3853_14-NameNode.jpg)
Click the same button again to add another top level choice.
![tree view node](/tipimages_sharepoint/3853_15-AddAnotherRootNode.jpg)
With one of the choices selected, click the 2nd button on the left. This will create a child level menu option.
![main](/tipimages_sharepoint/3853_16-AddChildNode.jpg)
To add a link to the option, scroll up under the "Properties" section on the right, and enter a desired link in the NavigationUrl. (You can experiment with other property options later on.)
![mssharepoint](/tipimages_sharepoint/3853_17-AddLinkAndText.jpg)
Save the file in the SharePoint Designer and then check the document library where the code is being stored in SharePoint. You should see your file there. You can click it if you want to check it.
![add document](/tipimages_sharepoint/3853_18-CheckFile.jpg)
Now let's do a little formatting of the menu. Back in SharePoint Designer, open the Common TreeView Tasks and click "AutoFormat".
![auto format](/tipimages_sharepoint/3853_19-ChangeMenuFormat.jpg)
Select different "Schemes" until you find one you like.
![arrows](/tipimages_sharepoint/3853_20-SelectMenuType.jpg)
It's a good practice to pop up a new window, especially if it is an external link. To do that, find the "Target" property for the link and add "_blank".
![mssqltips](/tipimages_sharepoint/3853_21-TryPoppingUpNewWindow.jpg)
Placing the Menu on your Team Site
From your Document Library, let's get the URL of the saved ASPX file. In Internet Explorer, right click on the file and select "Copy Shortcut".
![copy shortcut](/tipimages_sharepoint/3853_22-GetShortcut.jpg)
Now, navigate to your Team Site or Top Level home page. Under "Site Actions", click "Edit Page".
![edit page](/tipimages_sharepoint/3853_23-EditPage.jpg)
Then click "Add a Web Part".
![add a web part](/tipimages_sharepoint/3853_24-AddWebPart.jpg)
Under "Categories", choose "Media and Content", then click "Page Viewer".ÿ
![page viewer](/tipimages_sharepoint/3853_25-ChoosePageViewerWebPart.jpg)
Then click the "Add" button.ÿ
![content editor](/tipimages_sharepoint/3853_26-ClickAdd.jpg)
Click "open the tool pane".
![page viewer](/tipimages_sharepoint/3853_27-OpenTheToolPane.jpg)
Choose "Web Page" and paste the URL of your menu aspx file in the Link box.
![page viewer](/tipimages_sharepoint/3853_28-PasteURL2.jpg)
Under the "Appearance" section of the Web Part, adjust the Height and Width as necessary. Try expanding all the menu nodes and recheck your sizes by clicking "Apply". When you get it right. Click "OK".
![resource menu](/tipimages_sharepoint/3853_29-CustomizeAppearance.jpg)
Here's a sample of what my menu looks like:
![search this site](/tipimages_sharepoint/3853_30-Expanded.jpg)
Here it is in collapsed form.
![main](/tipimages_sharepoint/3853_31-Collapsed.jpg)
There you have it. Your own TreeMenu, built "out of the box" right from SharePoint Designer.
Next Steps
- Though I didn't test it, all these options are available in SharePoint 2007 with SharePoint Designer 2007.
About the author
This author pledges the content of this article is based on professional experience and not AI generated.
View all my tips