How to use SiteMapPath Navigation Control in Asp.net | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

How to use SiteMapPath Navigation Control in Asp.net

Introduction: In this article I have explain How to use SiteMapPath Navigation Control in Asp.net



Description:

Right click on Project/Website name > Add New Item > Select Site Map as mention in attached snapshot: 


You see the structure as show below:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title=""  description="">
        <siteMapNode url="" title=""  description="" />
        <siteMapNode url="" title=""  description="" />
    </siteMapNode>
</siteMap>

Enter the .aspx page name in URL, Title and Description as shown in below example:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="Default.aspx" title="Home"  description="Home Page">
        <siteMapNode url="About_Us.aspx" title="About Us"  description="Aount Us Page" />
      <!--For Sub menu (Here Photo Gallery is Sub menu of Achievement Menu)-->
      <siteMapNode url="Achievements.aspx" title="Achievement" description="Achievements Page">
        <siteMapNode url="Photo_Gallery.aspx" title="Photo Gallery" description="Photo Gallery Page"/>
      </siteMapNode>
        <siteMapNode url="Contact_Us.aspx" title="Contact Us"  description="Contact Us Page" />
    </siteMapNode>
</siteMap>

Add a new webform to project. Drag and drop the control SiteMapPath from Toolbox> Navigation as show in attached snapshot:


After that you can change the formating of SiteMapPath via click on Auto Foramt, choose your style or can add the CssClass in Properties
  <asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana"
            Font-Size="0.8em" PathSeparator=" : ">
        <CurrentNodeStyle ForeColor="#333333" />
        <NodeStyle Font-Bold="True" ForeColor="#7C6F57" />
        <PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" />
        <RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" />
        </asp:SiteMapPath>

Run the project and check the result.

Is it helpful?

If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget