Sunday, September 29, 2013

How to use SiteMapPath Navigation Control in

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


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="" >
    <siteMapNode url="" title=""  description="">
        <siteMapNode url="" title=""  description="" />
        <siteMapNode url="" title=""  description="" />

Enter the .aspx page name in URL, Title and Description as shown in below example:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="" >
    <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 url="Contact_Us.aspx" title="Contact Us"  description="Contact Us Page" />

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" />

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.

No comments:

Post a Comment