Customizing SharePoint 2010 Site Navigation Programmatically (Wrox)

Summary: Learn how to customize the way users navigate your Microsoft SharePoint 2010 site. The article includes code samples that provide a working example of how to display and modify the Top Link Bar and Quick Launch Bar on your site.

Wrox SharePoint Books

Applies to: Business Connectivity Services | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio

Author: Bryan Phillips

Editors: WROX Tech Editors for SharePoint 2010 Articles

Contents

• Overview of Navigation in SharePoint

• Displaying the Navigation Hierarchy

• Adding Links to the Site's Navigation

• Deleting Links from the Site's Navigation

• Conclusion

• About the Author

Download the code

Overview of Navigation in SharePoint

One of the most common customizations that users request is the ability to change the navigation structure of their SharePoint 2010 sites. Although the navigational elements of a SharePoint site are automatically updated with the advent of new lists, libraries, and subsites, users often want to change or remove links. In a SharePoint-based intranet or extranet site, the user adds links to internal and external resources that would ordinarily be embedded deep in the site. For example, a site that is centered around a specific department or role typically links to multiple, widely distributed resources.

Users primarily navigate a SharePoint site by using the Top Link Bar, located at the top of the page, and the Quick Launch Bar, located on the left side of the page, as shown in Figure 1.

Figure 1. Top Link Bar and Quick Launch Bar

The collection of tabs under the site title is the Top Link Bar. The multi-level list of links on the left side of the page is the Quick Launch Bar. This section explains how to configure the links that the navigation controls display, and how to add links to external resources.

You use different pages to edit the navigation in SharePoint Foundation 2010 than you use in SharePoint Server 2010. Table 1 lists the pages to edit and which edition of SharePoint 2010 uses them.

Table 1. Navigation Editing by Edition

Editing Navigation in SharePoint Foundation 2010

You can use the Site Settings page in SharePoint Foundation 2010 to access several other pages, where you can edit the navigation on your site. To open the Site Settings page, click Site Actions and then click Site Settings.

The first page is the Quick Launch page. Click the Quick Launch link in the Look and Feel section of the Site Settings page to access the Quick Launch page. The headings and links are listed as they appear on the Quick Launch Bar. You can edit a heading or link by clicking the edit icon to the left of the item that you want to edit. Clicking the New Heading link adds a new heading at the top level. Click the New Navigation Link to add a new link under one of the headings. Click Change Order to reorder the headings and links.

Figure 2. Quick Launch

The next page is the Top Link Bar page, which lists the tabs in the site’s Top Link Bar. To access the page, click the Top Link Bar in the Look and Feel section of the Site Settings page. You can edit a tab by clicking the edit icon to the left of the tab. You can create new tabs by clicking New Navigation. You can reorder the tabs by clicking Change Order.

Figure 3. Top Link Bar

Editing Navigation in SharePoint Server 2010

In SharePoint Server 2010, the Navigation Settings page combines the functionality of the Quick Launch and Top Link Bar pages into a single page. To access the Navigation Settings page, click Navigation under the Look and Feel section of the Site Settings page. Use the Global Navigation section to configure how the Top Link Bar automatically updates. The radio button enables you to configure whether the site inherits its Top Link Bar from its parent site or if it uses its own Top Link Bar. Select the check boxes if you want SharePoint Server 2010 to automatically display new subsites and pages in the site when they are created.

Figure 4. Navigation Settings

The Current Navigation section applies to the Quick Launch Bar. The Sorting section enables you to configure whether the items in the Top Link Bar and Quick Launch Bar sort automatically. The Navigation Editing and Sorting sections enable you to add links to the Top Link Bar (Global Navigation) and the Quick Launch Bar (Current Navigation). If you click Sort manually in the Sorting section, you can use the tree and the buttons above it to move headings and links up and down to position them. The other buttons enable you to edit, delete, and add new headings and links. Use Show and Hide Ribbon to show or hide the controls that show and hide the ribbon. If you are using SharePoint Foundation 2010, the Navigation Settings page is not available. However, you can build similar functionality, as shown in the next sections.

Displaying the Navigation Hierarchy

To add headings and links to a site's navigation, use the Navigation property on the SPWeb object for the site that you want to customize. The Navigation property returns an SPNavigation object that represents the Top Link Bar and Quick Launch Bar in the site. The SPNavigation class includes the TopNavigation property and the QuickLaunch property, which you use to access, modify, and remove items from the Top Link Bar or Quick Launch Bar.

using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;

SPWeb site = SPContext.Current.Web;
SPNavigationNodeCollection topLinkBar = 
    site.Navigation.TopNavigationBar;
SPNavigationNodeCollection topLinkBar = 
    site.Navigation.QuickLaunch;

In the preceding code example, the Current property on the SPContext class is used to get an instance of the SPWeb class that represents the current site. Next, the Navigation property of the SPWeb class is used to obtain the SPNavigationNodeCollection objects that contain the Top Link Bar and Quick Launch Bar links, each of which is represented by an SPNavigationNode object. Each SPNavigationNode object has a Children property that contains zero or more SPNavigationNode objects forming a hierarchy. Display the hierarchy by using an ASP.Net TreeView control, as shown in Figure 5. You could just add the TreeView control to a Site Page or Application Page, but you could not use the visual designer in Visual Studio because those pages reference the master pages of the site.

Figure 5. Top Link Bar and Quick Launch Bar displayed in a TreeView control

The following code is used to populate the TreeView control in Figure 5.

topNavTreeView.Nodes.Add(new TreeNode("Top Link Bar Links"));
quickLaunchTreeView.Nodes.Add(new TreeNode("Quick Launch Links"));
                
RecurseNodes(site.Navigation.TopNavigationBar, 
    topNavTreeView.Nodes[0].ChildNodes);
RecurseNodes(site.Navigation.QuickLaunch, 
    quickLaunchTreeView.Nodes[0].ChildNodes);

topNavTreeView.ExpandAll();
quickLaunchTreeView.ExpandAll();

Both TreeView controls are initially populated with a root node, which is the parent of the nodes in the Top Link Bar and Quick Launch Bar. Next, an SPWeb object for the current site gets a reference to the SPNavigationNodeCollection objects that represent the Top Link Bar and Quick Launch Bar. The SPNavigationNodeCollection object, together with the ChildNodes property of the root node of the associated TreeView control, are passed to the RecurseNodes function to populate the TreeView control. The RecurseNodes function populates the TreeView control as it follows the hierarchy of the Top Link Bar and Quick Launch Bar.

private void RecurseNodes(SPNavigationNodeCollection nodes, 
    TreeNodeCollection treeNodes) {

    foreach (SPNavigationNode node in nodes) {
        TreeNode treeNode = new TreeNode();
        treeNode.Text = node.Title;
        treeNode.ToolTip = node.Url;
        treeNode.ShowCheckBox = true;
        treeNode.Checked = node.IsExternal;
        treeNode.Value = node.Id.ToString();

        treeNodes.Add(treeNode);
        RecurseNodes(node.Children, treeNode.ChildNodes);
    }
}

In the RecurseNodes function, a new TreeNode object is created for each node in the Top Link Bar and Quick Launch Bar and added to the appropriate parent in the TreeView control. The TreeNode object is configured by using the various properties of the SPNavigationNode class, described in Table 2. Finally, the RecurseNodes function calls itself again to populate any decendants of the current node.

Table 2. SPNavigationNode Properties

Adding Links to the Site's Navigation

Use the following code to add a link to the Top Link Bar or to the Quick Launch Bar.

using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;

SPWeb site = SPContext.Current.Web;

SPNavigationNode node = new SPNavigationNode(
    topNavTitleTextBox.Text, topNavUrlTextBox.Text, 
    topNavIsExternalCheckBox.Checked);

if (topNavTreeView.SelectedNode == topNavTreeView.Nodes[0]) {
    site.Navigation.TopNavigationBar.AddAsLast(node);
} else {
    int parentId = int.Parse(topNavTreeView.SelectedNode.Value);
    site.Navigation.GetNodeById(parentId).Children.AddAsLast(node);
}

if (topNavOpenInNewWindowCheckBox.Checked) {
    node.Properties["Target"] = "_blank";
    node.Update();
}

In the preceding code example, pass the link's display text, URL, and whether the link points to a resource inside or outside SharePoint to the constructor of the SPNavigationNode class.

If you want to add the link as a first-level node so that it appears as a tab, call the site.Navigation.TopNavigationBar.AddAsLast method, and pass in the new SPNavigationNode object. Otherwise, use the GetNodeById method of the SPNavigation class to obtain a reference to the parent node in the Top Link Bar and use its Children property instead. In that case, the link appears in the drop-down menu under the parent tab.

At this point, the SPNavigationNode object is added to the Top Link Bar and appears when the page reloads. However, if you want the link to open in a new window, you must use the Properties property of the SPNavigationNode class to store a value for the link's Target attribute. Use _blank if you want the link to open a new browser window when the link is clicked. Finally, call the Update method on the SPNavigationNode to save your change.

Deleting Links from the Site's Navigation

Use the following code to delete a link from the Top Link Bar or the Quick Launch Bar.

using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;

SPWeb site = SPContext.Current.Web;
int id = int.Parse(topNavTreeView.SelectedNode.Value);
SPNavigationNode node = site.Navigation.GetNodeById(id);
node.Delete();

In the preceding code example, use the GetNodeById method of the SPNavigation class to get a reference to the SPNavigationNode for the link. Because the first code example assigned the Id property of the SPNavigationNode object to the Value property of the TreeNode object, the value for the Id of the SPNavigationNode object can be determined after a node in the TreeView control is selected. After a reference to the SPNavigationNode object is obtained, calling its Delete method removes it from the site's navigation, whether it was previously added to the Top Link Bar or to the Quick Launch Bar.

Conclusion

There are many differences between editing the navigation for a SharePoint Foundation 2010 site and a SharePoint Server 2010 site. The Quick Launch Bar and Top Link Bar pages provide basic editing of your site’s navigation; the Navigation Settings page combines both into a single page. The Navigation Settings page also provides more control over when links are automatically added to site’s navigation. By using the code in this article, you can provide a similar editing experience in SharePoint Foundation 2010 to the one found in SharePoint Server 2010, or integrate line-of-business systems by automatically creating links to those systems in your site’s navigation.

To download the code that accompanies this article, see Programmatically Customizing Site Navigation.

About the Author

Bryan Phillips is a senior partner at Composable Systems, LLC, and a Microsoft Most Valuable Professional in SharePoint Server. He is a co-author of Professional Microsoft Office SharePoint Designer 2007 and Beginning SharePoint Designer 2010 and maintains a SharePoint-related blog. Bryan has worked with Microsoft technologies since 1997 and holds the Microsoft Certified Trainer (MCT), Microsoft Certified Solution Developer (MCSD), Microsoft Certified Database Administrator (MCDBA), and Microsoft Certified Systems Engineer (MCSE) certifications.

The following were tech editors on Microsoft SharePoint 2010 articles from Wrox:

• Matt Ranlett is a SQL Server MVP who has been a fixture of the Atlanta .NET developer community for many years. A founding member of the Atlanta Dot Net Regular Guys, Matt has formed and leads several area user groups. Despite spending dozens of hours after work on local and national community activities, such as the SharePoint 1, 2, 3! series, organizing three Atlanta Code Camps, working on the INETA board of directors as the vice president of technology, and appearing in several podcasts such as .Net Rocks and the ASP.NET Podcast, Matt recently found the time to get married to a wonderful woman named Kim, whom he helps to raise three monstrous dogs. Matt currently works as a senior consultant with Intellinet and is part of the team committed to helping people succeed by delivering innovative solutions that create business value.

• Jake Dan Attis. When it comes to patterns, practices, and governance with respect to SharePoint development, look no further than Jake Dan Attis. A transplant to the Atlanta area from Moncton, Canada, Dan has a degree in Applied Mathematics, but is 100% hardcore SharePoint developer. You can usually find Dan attending, speaking at, and organizing community events in the Atlanta area, including code camps, SharePoint Saturday, and the Atlanta SharePoint User Group. When he's not working in Visual Studio, Dan enjoys spending time with his daughter Lily, watching hockey and football, and sampling beers of the world.

• Kevin Dostalek has over 15 years of experience in the IT industry and over 10 years managing large IT projects and IT personnel. He has led projects for companies of all sizes and has participated in various roles including Developer, Architect, Business Analyst, Technical Lead, Development Manager, Project Manager, Program Manager, and Mentor/Coach. In addition to these roles, Kevin also managed a Solution Delivery department as a Vice President for a mid-sized MS Gold Partner from 2005 through 2008 and later also served as a Vice President of Innovation and Education. In early 2010 Kevin formed Kick Studios as a company providing consulting, development, and training services in the specialized areas of SharePoint and Social Computing. Since then he has also appeared as a speaker at numerous user group, summit, and conference type events across the country. You can find out more about Kevin on his blog, The Kickboard.

• Larry Riemann has over 17 years of experience architecting and creating business applications for some of the world’s largest companies. Larry is an independent consultant who owns Indigo Integrations and does SharePoint consulting exclusively through SharePoint911. He is an author, writes articles for publication and occasionally speaks at conferences. For the last several years he has been focused on SharePoint, creating and extending functionality where SharePoint leaves off. In addition to working with SharePoint, Larry is an accomplished .Net Architect and has extensive expertise in systems integration, enterprise architecture and high availability solutions. You can find him on his blog.

• Sundararajan Narasiman is a Technical Architect with Content Management & Portals Group of Cognizant Technology Solutions, Chennai, with more than 10 years of Industry Experience. Sundararajan is primarily into the Architecture & Technology Consulting on SharePoint 2010 Server stack and Mainstream .NET 3.5 developments. He has passion for programming and also has interest for Extreme Programming & TDD.