In this article I will explain with an example, how to use ASP.Net Menu control with example in C# and VB.Net.
 
 

HTML Markup

The HTML Markup consists of following controls:
SiteMapDataSource - Provides site map data for navigation controls.
Menu - Displays hierarchical navigation menu using SiteMap.
 
Finally, LevelMenuItemStyles has been specified, which consists of two MenuItemStyle nodes.
The first one is for the CSS Class of the top level or main menu and the second one is for the child or submenu.
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false"/>
<asp:Menu ID="Menu" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal"
    OnMenuItemDataBound="OnMenuItemDataBound">
    <LevelMenuItemStyles>
        <asp:MenuItemStyle CssClass="main_menu" />
        <asp:MenuItemStyle CssClass="level_menu" />
    </LevelMenuItemStyles>
</asp:Menu>
 
 

Adding the Sitemap XML and understanding its use

Sitemap is nothing but a map of your site, it is an XML file which has all the Pages and the Child Pages present in the site.
In order to add sitemap right click on the project folder inside the Solution Explorer and select Site Map option from the Add New Item Dialog as shown below.
Using ASP.Net Menu control with example in C# and VB.Net
 
Once the file is added you need to structure it based on the Level 1 Pages and the Child Pages.
Note:You can have as many child levels as you want, this article uses 2 Level Menu structure.
 
Following is the SiteMap, it has the following page structure.
Using ASP.Net Menu control with example in C# and VB.Net
 
<?xml version= "1.0" encoding= "utf-8" ?>
<siteMap xmlns= "http://schemas.microsoft.com/ AspNet/SiteMap-File-1.0" >
  <siteMapNode url= "" title= "Home"  description= "">
    <siteMapNode url= "Home.aspx" title= "Home"  description= "Home Page" />
    <siteMapNode url= "javascript:;" title= "Services"  description= "Services Page">
      <siteMapNode url = "Consulting.aspx" title= "Consulting"  description= "Consulting Page"></siteMapNode>
      <siteMapNode url = "Outsourcing.aspx" title= "Outsourcing"  description= "Outsourcing Page"></siteMapNode>
    </siteMapNode>
    <siteMapNode url= "About.aspx" title= "About"  description= "About Us Page" />
    <siteMapNode url= "Contact.aspx" title= "Contact"  description= "Contact Us Page" />
  </siteMapNode>
</siteMap>
 
 

Styling the ASP.Net Menu Control

Following CSS style is used in the Head section of the Master Page to apply CSS to the main menu and submenu.
Note:You can also make use of an external CSS class file.
 
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    .ma in_menu
    {
        width: 100px;
        background-color: #8AE0F2;
        color: #000;
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin-right: 5px;
    }
    .level_menu
    {
        width: 110px;
        background-color: #000;
        color: #fff;
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin-top: 5px;
    }
    .selected
    {
        background-color: #852B91;
        color: #fff;
    }
</style>
 
 

Setting the Selected Menu at Runtime

Following OnMenuItemDataBound event handler is called when Menu is rendered.
Inside the OnMenuItemDataBound event handler, if selected node Title is same as current item Text and the current item Parent is not null then item Parent Selected property is set to True else item Selected property is set to True.
Note:When a Child or Submenu is selected then its corresponding Parent Menu is also selected.
 
C#
protected void OnMenuItemDataBound(object sender, MenuEventArgs e)
{
    if (SiteMap.CurrentNode != null)
    {
        if (e.Item.Text == SiteMap.CurrentNode.Title)
        {
            if (e.Item.Parent !=  null)
            {
                e.Item.Parent.Selected = true;
            }
            else
            {
                e.Item.Selected = true;
            }
        }
    }
}
 
VB.Net
Protected Sub OnMenuItemDataBound(sender As Object, e As MenuEventArgs)
    If SiteMap.CurrentNode IsNot Nothing Then
        If e.Item.Text = SiteMap.CurrentNode.Title Then
            If e.Item.Parent IsNot Nothing Then
                e.Item.Parent.Selected = True
            Else
                e.Item.Selected = True
            End If
        End If
    End If
End Sub
 
 

Screenshot

Using ASP.Net Menu control with example in C# and VB.Net
 
 

Demo

View Demo
 
 

Downloads

Download Code