Share via


SiteMapPath Web Server Control Declarative Syntax

Displays a set of text or image hyperlinks that enable users to easily navigate a Web site, while taking a minimal amount of page space.

<asp:SiteMapPath
    AccessKey="string"
    BackColor="color name|#dddddd"
    BorderColor="color name|#dddddd"
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
        Inset|Outset"
    BorderWidth="size"
    CssClass="string"
    Enabled="True|False"
    EnableTheming="True|False"
    EnableViewState="True|False"
    Font-Bold="True|False"
    Font-Italic="True|False"
    Font-Names="string"
    Font-Overline="True|False"
    Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|
        Large|X-Large|XX-Large"
    Font-Strikeout="True|False"
    Font-Underline="True|False"
    ForeColor="color name|#dddddd"
    Height="size"
    ID="string"
    OnDataBinding="DataBinding event handler"
    OnDisposed="Disposed event handler"
    OnInit="Init event handler"
    OnItemCreated="ItemCreated event handler"
    OnItemDataBound="ItemDataBound event handler"
    OnLoad="Load event handler"
    OnPreRender="PreRender event handler"
    OnUnload="Unload event handler"
    ParentLevelsDisplayed="integer"
    PathDirection="RootToCurrent|CurrentToRoot"
    PathSeparator="string"
    RenderCurrentNodeAsLink="True|False"
    runat="server"
    ShowToolTips="True|False"
    SiteMapProvider="string"
    SkinID="string"
    SkipLinkText="string"
    Style="string"
    TabIndex="integer"
    ToolTip="string"
    Visible="True|False"
    Width="size"
>
        <CurrentNodeStyle />
        <CurrentNodeTemplate>
            <!-- child controls -->
        </CurrentNodeTemplate>
        <NodeStyle />
        <NodeTemplate>
            <!-- child controls -->
        </NodeTemplate>
        <PathSeparatorStyle />
        <PathSeparatorTemplate>
            <!-- child controls -->
        </PathSeparatorTemplate>
        <RootNodeStyle />
        <RootNodeTemplate>
            <!-- child controls -->
        </RootNodeTemplate>
</asp:SiteMapPath>

Remarks

The SiteMapPath control is a site navigation control that reflects data that is provided by the SiteMap object. It provides a space-saving way to easily navigate a site and serves as a point of reference for where the currently displayed page is within a site. This type of control is commonly called a breadcrumb, or eyebrow, because it displays a hierarchical path of hyperlinked page names that provides an escape up the hierarchy of pages from the current location.

The SiteMapPath is useful for sites that have deep hierarchical page structures, but where a TreeView or Menu control might require too much space on a page.

For more information on the SiteMapPath control and navigation controls, see Navigation ASP.NET Controls.

Example

The following code example demonstrates how to use a SiteMapPath control declaratively in a Web Forms page. This code example demonstrates some of the rules of precedence that govern the order with which templates and styles are applied to SiteMapPath nodes.

This example uses the default site map provider and a Web.sitemap file with the following structure.

<siteMap>
  <siteMapNode title="WebForm1" description="WebForm1" url="WebForm1.aspx" >
    <siteMapNode title="WebForm2" description="WebForm2" url="WebForm2.aspx"/>
  </siteMapNode>
</siteMap>
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>ASP.NET Example</title>
</head>
<body>
        <form id="form1" runat="server">

            <!-- The following example demonstrates some of the orders
                 of precedence when applying styles and templates to
                 functional nodes of a SiteMapPath.

                 The NodeStyle and RootNodeStyle define the same attributes,
                 but are different and conflict with each other: the
                 RootNodeStyle supersedes NodeStyle, and is the style
                 rendered. Notice, however, that the underline style
                 defined by NodeStyle is still applied.

                 Both a CurrentNodeStyle and a CurrentNodeTemplate are
                 defined. A template supersedes a style for a node
                 type, so CurrentNodeTemplate is displayed and CurrentNodeStyle
                 is ignored. -->

            <asp:SiteMapPath ID="SiteMapPath1" runat="server"
                RenderCurrentNodeAsLink="true"
                NodeStyle-Font-Names="Franklin Gothic Medium"
                NodeStyle-Font-Underline="true"
                NodeStyle-Font-Bold="true"
                RootNodeStyle-Font-Names="Symbol"
                RootNodeStyle-Font-Bold="false"
                CurrentNodeStyle-Font-Names="Verdana"
                CurrentNodeStyle-Font-Size="10pt"
                CurrentNodeStyle-Font-Bold="true"
                CurrentNodeStyle-ForeColor="red"
                CurrentNodeStyle-Font-Underline="false">
                <CURRENTNODETEMPLATE>
                        <asp:Image id="Image1" runat="server" ImageUrl="WebForm2.jpg" AlternateText="WebForm2"/>
                </CURRENTNODETEMPLATE>
            </asp:SiteMapPath>


        </form>
    </body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>ASP.NET Example</title>
</head>
<body>
        <form id="form1" runat="server">

            <!-- The following example demonstrates some of the orders
                 of precedence when applying styles and templates to
                 functional nodes of a SiteMapPath.

                 The NodeStyle and RootNodeStyle define the same attributes,
                 but are different and conflict with each other: the
                 RootNodeStyle supersedes NodeStyle, and is the style
                 rendered. Notice, however, that the underline style
                 defined by NodeStyle is still applied.

                 Both a CurrentNodeStyle and a CurrentNodeTemplate are
                 defined. A template supersedes a style for a node
                 type, so CurrentNodeTemplate is displayed and CurrentNodeStyle
                 is ignored. -->

            <asp:SiteMapPath ID="SiteMapPath1" runat="server"
                RenderCurrentNodeAsLink="true"
                NodeStyle-Font-Names="Franklin Gothic Medium"
                NodeStyle-Font-Underline="true"
                NodeStyle-Font-Bold="true"
                RootNodeStyle-Font-Names="Symbol"
                RootNodeStyle-Font-Bold="false"
                CurrentNodeStyle-Font-Names="Verdana"
                CurrentNodeStyle-Font-Size="10pt"
                CurrentNodeStyle-Font-Bold="true"
                CurrentNodeStyle-ForeColor="red"
                CurrentNodeStyle-Font-Underline="false">
                <CURRENTNODETEMPLATE>
                        <asp:Image id="Image1" runat="server" ImageUrl="WebForm2.jpg" AlternateText="WebForm2"/>
                </CURRENTNODETEMPLATE>
            </asp:SiteMapPath>


        </form>
    </body>
</html>
<%@ Page Language="VJ#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>ASP.NET Example</title>
</head>
<body>
        <form id="form1" runat="server">

            <!-- The following example demonstrates some of the orders
                 of precedence when applying styles and templates to
                 functional nodes of a SiteMapPath.

                 The NodeStyle and RootNodeStyle define the same attributes,
                 but are different and conflict with each other: the
                 RootNodeStyle supercedes NodeStyle, and is the style
                 rendered. Notice, however, that the underline style
                 defined by NodeStyle is still applied.

                 Both a CurrentNodeStyle and a CurrentNodeTemplate are
                 defined. A template supercedes a style for a node
                 type, so CurrentNodeTemplate is displayed and CurrentNodeStyle
                 is ignored. -->

            <asp:SiteMapPath ID="SiteMapPath1" runat="server"
                RenderCurrentNodeAsLink="true"
                NodeStyle-Font-Names="Franklin Gothic Medium"
                NodeStyle-Font-Underline="true"
                NodeStyle-Font-Bold="true"
                RootNodeStyle-Font-Names="Symbol"
                RootNodeStyle-Font-Bold="false"
                CurrentNodeStyle-Font-Names="Verdana"
                CurrentNodeStyle-Font-Size="10pt"
                CurrentNodeStyle-Font-Bold="true"
                CurrentNodeStyle-ForeColor="red"
                CurrentNodeStyle-Font-Underline="false">
                <CURRENTNODETEMPLATE>
                        <asp:Image id="Image1" runat="server" ImageUrl="WebForm2.jpg" AlternateText="WebForm2"/>
                </CURRENTNODETEMPLATE>
            </asp:SiteMapPath>


        </form>
    </body>
</html>

See Also

Reference

SiteMapPath

Other Resources

Navigation ASP.NET Controls