User Tools

Site Tools


notes:sharepoint2010:navigationcontrols

Navigation Controls in SharePoint 2010

Navigation controls in SharePoint 2010:

  • Top Link Bar - Contains links to sites that are at least one level below the current site.
  • Quick Launch - Supports at least two hierarchy levels: heading and navigation link.
  • Breadcrumbs - Displays a hierarchical path from the current navigation position to the root.
  • Tree View - Displays the site contents that are below the current site in a hierarchical structure.
<table cellpadding="3" cellspacing="5">
    <tr>
        <td valign="top">
            <strong>Top Link Bar Navigation</strong><br />
            Contains links to sites that<br/>
            are at least one level below<br />
            the current site.<br />
            <br />
            <div class="s4-lp s4-toplinks">
                <SharePoint:AspMenu
                    Id="TopNavigationMenuTest"
                    Runat="server"
                    EnableViewState="false"
                    DataSourceID="TopSiteMapTest"
                    UseSimpleRendering="true"
                    UseSeparateCss="false"
                    Orientation="Vertical"
                    StaticDisplayLevels="2"
                    MaximumDynamicDisplayLevels="1"
                    SkipLinkText=""
                    CssClass="s4-tn"/>
                <asp:SiteMapDataSource
                    ShowStartingNode="False"
                    SiteMapProvider="SPNavigationProvider"
                    Id="TopSiteMapTest"
                    runat="server"
                    StartingNodeUrl="sid:1002"/>
            </div>
        </td>
 
        <td valign="top">
            <strong>Quick Launch Navigation</strong><br />
            Supports at least two hierarchy<br />
            levels: heading and navigation link.<br />
            <br />
            <SharePoint:AspMenu
                Id="V4QuickLaunchMenuTest"
                Runat="server"
                EnableViewState="false"
                DataSourceID="QuickLaunchSiteMapTest"
                UseSimpleRendering="true"
                UseSeparateCss="false"
                Orientation="Vertical"
                StaticDisplayLevels="2"
                MaximumDynamicDisplayLevels="0"
                SkipLinkText=""
                CssClass="s4-ql"/>       
            <asp:SiteMapDataSource
                ShowStartingNode="False"
                SiteMapProvider="SPNavigationProvider"
                Id="QuickLaunchSiteMapTest"
                runat="server"
                StartingNodeUrl="sid:1025"/>
        </td>
 
        <td valign="top">
            <strong>Breadcrumb Navigation</strong><br />
            Displays a hierarchical path from<br />
            the current navigation position<br />
            to the root.<br />
            <br />
            <div class="s4-breadcrumb-top">
                <asp:Label ID="Label1" runat="server" CssClass="s4-breadcrumb-header"
                    Text="This page location is:"/>
            </div>
            <SharePoint:PopoutMenu
                runat="server"
                ID="GlobalBreadCrumbNavPopoutTest"
                IconUrl="/_layouts/images/fgimg.png"
                IconOffsetX=0
                IconOffsetY=112
                IconWidth=16
                IconHeight=16
                AnchorCss="s4-breadcrumb-anchor"
                AnchorOpenCss="s4-breadcrumb-anchor-open"
                MenuCss="s4-breadcrumb-menu">
                <SharePoint:ListSiteMapPath ID="ListSiteMapPath1"
                    runat="server"
                    SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
                    RenderCurrentNodeAsLink="false"
                    PathSeparator=""
                    CssClass="s4-breadcrumb"
                    NodeStyle-CssClass="s4-breadcrumbNode"
                    CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"
                    RootNodeStyle-CssClass="s4-breadcrumbRootNode"
                    NodeImageOffsetX=0
                    NodeImageOffsetY=321
                    NodeImageWidth=16
                    NodeImageHeight=16
                    NodeImageUrl="/_layouts/images/fgimg.png"
                    HideInteriorRootNodes="true"
                    SkipLinkText="" />
            </SharePoint:PopoutMenu>      
        </td>
 
        <td valign="top">
            <strong>Tree View Navigation</strong><br />
            Displays the site contents that<br />
            are below the current site in<br />
            a hierarchical structure.<br />
            <br />
            <SharePoint:SPTreeView 
                id="WebTreeView1" 
                runat="server" 
                ShowLines="false" 
                DataSourceId="TreeViewDataSource1" 
                ExpandDepth="0" 
                SelectedNodeStyle-CssClass="ms-tvselected" 
                NodeStyle-CssClass="ms-navitem" 
                SkipLinkText="" 
                NodeIndent="12" 
                ExpandImageUrl="/_layouts/images/tvclosed.png" 
                ExpandImageUrlRtl="/_layouts/images/tvclosedrtl.png" 
                CollapseImageUrl="/_layouts/images/tvopen.png" 
                CollapseImageUrlRtl="/_layouts/images/tvopenrtl.png" 
                NoExpandImageUrl="/_layouts/images/tvblank.gif"/>
            <SharePoint:SPHierarchyDataSourceControl 
                runat="server" 
                id="TreeViewDataSource1" 
                RootContextObject="Web" 
                IncludeDiscussionFolders="false"/>
        </td>
    </tr>
</table>

sharepoint_navigation.jpg

Create menu items in the TopNavigationBar:

// web - a website where the menu items have to be created
// menuItems - a list of menu items (key - the title of the menu item, value - the url of the menu item)
private void CreateTopLinkNavBar(SPWeb web, Dictionary<string, string> menuItems)
{
    try
    {
        web.AllowUnsafeUpdates = true;
 
        // Select a single node
        /*
        var nodes = from n in web.Navigation.TopNavigationBar.Cast<SPNavigationNode>()
                    where n.Title.Equals("Update User")
                    select n;
        */
 
        // Remove all menu items.
        List<SPNavigationNode> nodes = new List<SPNavigationNode>();
        foreach (SPNavigationNode node in web.Navigation.TopNavigationBar)
            nodes.Add(node);
        foreach (SPNavigationNode node in nodes)
            node.Delete();
 
        // Create new menu items.
        foreach (KeyValuePair<string, string> item in menuItems)
            web.Navigation.TopNavigationBar.AddAsLast(new SPNavigationNode(item.Key, item.Value, true));
 
        web.Update();
    }
    finally
    {
        web.AllowUnsafeUpdates = false;
    }
}

Add links to the Quick Launch nav bar (SP 2013):

// 'web' as an instance of SPWeb
SPNavigationNodeCollection nodes = web.Navigation.QuickLaunch;
SPNavigationNode node1 = new SPNavigationNode("Link1", "/_layouts/15/Page1.aspx", false);
SPNavigationNode node2 = new SPNavigationNode("Link2", "/_layouts/15/Page2.aspx", false);
SPNavigationNode node3 = new SPNavigationNode("Link3", "/_layouts/15/Page3.aspx", false);
 
nodes.AddAsFirst(node1);
nodes.AddAsFirst(node2);
nodes.AddAsFirst(node3);
 
// To add as last:
// nodes.AddAsLast(node);

Remove links from the Quick Launch nav bar (SP 2013):

SPNavigationNodeCollection nodes = web.Navigation.QuickLaunch;
for (int i = nodes.Count - 1; i > -1; i--)
{
    if (nodes[i].Title.StartsWith("Link"))
    {
        nodes[i].Delete();
    } 
}
web.Update();

An example of the SharePoint toolbar:

<%@ Register TagPrefix="wssuc" TagName="ToolBar" src="˜/_controltemplates/ToolBar.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="ToolBarButton" src="˜/_controltemplates/ToolBarButton.ascx" %>
 
<wssuc:ToolBar runat="server" id="ToolBar" CssClass="ms-menutoolbar">
    <Template_Buttons>
        <wssuc:ToolBarButton ID="EditButton" runat="server" Text="Edit" Padding="2px" 
            NavigateUrl="/SitePages/Forms/AllPages.aspx" ImageUrl="/_layouts/images/edit.gif" />
        <wssuc:ToolBarButton ID="MagnifyButton" runat="server" Text="Magnify" 
            OnClick="MagnifyButton_Click" ImageUrl="/_layouts/images/magnify.gif" Padding="2px" />
    </Template_Buttons>
</wssuc:ToolBar>
protected void MagnifyButton_Click(object sender, EventArgs args)
{
    // ... do something
}
notes/sharepoint2010/navigationcontrols.txt · Last modified: 2016/10/19 by admin