How to: Customize the Display of the Top Link Bar
Applies to: SharePoint Foundation 2010
The top link bar that appears on most content pages in Microsoft SharePoint Foundation 2010 is a horizontal tabbed strip just below the website's title and description. The first tab is the "Home" position and usually has a link to the website's home page. Often other links on the bar point to websites lower in the site hierarchy.
The top link bar is rendered by an AspMenu control that is defined in the master page that creates the layout for pages in the website. In SharePoint Foundation 2010, the primary master page for both content pages and application pages is v4.master. You can change the appearance of the top link bar by modifying the markup in v4.master.
Customizing the Top Link Bar
You can alter the appearance of the top link bar by setting properties of the AspMenu control that renders the navigation nodes for the bar. For a detailed discussion of the markup for the control and its data source, see Navigation Controls.
For example, you can set properties that add flyout menus for displaying subordinate items below links on the bar. This change can be useful for reducing clutter on a crowded top link bar because it enables you to use links on the static menu as categories and to move secondary links to flyout menus below the categories.
To add flyout menus to the top link bar
In SharePoint Designer 2010, open the website that you want to customize.
In the Navigation pane, select Master Pages.
Right-click v4.master, and then click Copy.
Right-click an empty area of the Master Pages pane, and then click Paste.
The file v4_copy(1).master is created.
Right-click v4_copy(1).master, click Rename, and then type a new name, such as my.master.
Open the new file for editing.
Locate the top link bar's menu control. You can find the control in code view by searching on the following string:
ID="TopNavigationMenuV4"
Set the value of the StaticDisplayLevels attribute and the MaximumDynamicDisplayLevels attribute to 1, as follows.
<SharePoint:AspMenu ID="TopNavigationMenuV4" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="1"MaximumDynamicDisplayLevels="1" SkipLinkText="" CssClass="s4-tn"/>On the File menu, click Save.
Note
You might not be allowed to save changes to the site's default master page if a site-mapped page is open in the browser. If this occurs, close the browser and try again.
In the Navigation pane, select Master Pages.
Right-click the name of your master page, and then click Set as Default Master Page.
Note
You can also set a custom master page as the default master by writing code that sets the value of the SPWeb.MasterUrl property.
A flyout menu does not appear until one of the nodes on the top link bar contains child nodes. The following console application creates a new node with the display text "Resources" and adds one child node with the display text "SharePoint Developer Center."
using System;
using System.Linq;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;
namespace ConsoleApp
{
class Program
{
static void Main(string[] args)
{
using (SPSite site = new SPSite("https://localhost"))
{
using (SPWeb web = site.OpenWeb("parent"))
{
if (!web.Navigation.UseShared)
{
string resTitle = "Resources";
string resUrl = web.Navigation.Home.Url;
string spdevTitle = "SharePoint Developer Center";
string spdevUrl = "https://msdn.microsoft.com/sharepoint";
// Get the top link bar.
SPNavigationNodeCollection topnav = web.Navigation.TopNavigationBar;
// If a Resources link exists, get it.
SPNavigationNode resLink = topnav
.Cast<SPNavigationNode>()
.FirstOrDefault(n => n.Title == resTitle);
// If the Resources link does not exist, create it.
if (resLink == null)
{
resLink = new SPNavigationNode(resTitle, resUrl);
resLink = topnav.AddAsLast(resLink);
}
// If the Resources node has a SharePoint Dev Center child, get it.
SPNavigationNode spdevLink = resLink
.Children
.Cast<SPNavigationNode>()
.FirstOrDefault(n => n.Url == spdevUrl);
// If the item does not exist, create it.
if (spdevLink == null)
{
spdevLink = new SPNavigationNode(spdevTitle, spdevUrl, true);
spdevLink = resLink.Children.AddAsLast(spdevLink);
}
}
}
}
Console.Write("\nPress ENTER to continue....");
Console.ReadLine();
}
}
}
Imports System
Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.Navigation
Module ConsoleApp
Sub Main()
Using site As New SPSite("https://localhost")
Using web As SPWeb = site.OpenWeb()
If Not web.Navigation.UseShared Then
Dim resTitle As String = "Resources"
Dim resUrl As String = web.Navigation.Home.Url
Dim spdevTitle As String = "SharePoint Developer Center"
Dim spdevUrl As String = "https://msdn.microsoft.com/sharepoint"
' Get the top link bar.
Dim topnav As SPNavigationNodeCollection = web.Navigation.TopNavigationBar
' If a Resources link exists, get it.
Dim resLink As SPNavigationNode = topnav.Cast(Of SPNavigationNode)().FirstOrDefault( _
Function(n) n.Title = resTitle)
' If the Resources link does not exist, create it.
If resLink Is Nothing Then
resLink = New SPNavigationNode(resTitle, resUrl)
resLink = topnav.AddAsLast(resLink)
End If
' If the Resources node has a SharePoint Dev Center child, get it.
Dim spdevLink As SPNavigationNode = resLink.Children.Cast(Of SPNavigationNode)().FirstOrDefault( _
Function(n) n.Url = spdevUrl)
' If the item does not exist, create it.
If spdevLink Is Nothing Then
spdevLink = New SPNavigationNode(spdevTitle, spdevUrl, True)
spdevLink = resLink.Children.AddAsLast(spdevLink)
End If
End If
End Using
End Using
Console.Write(vbCrLf & "Press ENTER to continue....")
Console.Read()
End Sub
End Module
Top Link Bar Inheritance
The top link bar of a subsite can inherit the navigation links on the parent site's top link bar instead of defining its own set of links. A top link bar that is configured this way can provide a consistent experience for users who are moving between the parent site and the subsite. For more information, see How to: Share the Top Link Bar Between Sites.
However, you should be aware that configuring a subsite's top link to Use Links from Parent just means that the subsite uses the site map behind the parent's top link bar. The content of the top link bar is inherited. Its presentation is still determined by markup in the subsite's own default master page and in its own content pages. Although this fact may seem obvious, it is easy to overlook.
One way to achieve consistent presentation across all subsites is to set the MasterUrl property for the subsites so that it points to the parent site's master page. However, this approach could undo other local customizations and for that reason might not be desirable. A better approach might be to duplicate changes in the markup for the top link bar by making identical changes to each website's default master page.
See Also
Tasks
How to: Add a Subsite to the Top Link Bar or Quick Launch Menu