Modifier

MenuItem Class

  • Reference

Definition

Namespace:
System.Web.UI.WebControls
Assembly:
System.Web.dll

Represents a menu item displayed in the Menu control. This class cannot be inherited.

public ref class MenuItem sealed : ICloneable, System::Web::UI::IStateManager
public sealed class MenuItem : ICloneable, System.Web.UI.IStateManager
type MenuItem = class
    interface IStateManager
    interface ICloneable
Public NotInheritable Class MenuItem
Implements ICloneable, IStateManager
Inheritance
Object
MenuItem
Implements
ICloneable IStateManager

Examples

The following example demonstrates how to populate a Menu control with static MenuItem objects using declarative syntax.


<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head runat="server">
    <title>MenuItem Declarative Example</title>
</head>
<body>
    <form id="form1" runat="server">
    
      <h3>MenuItem Declarative Example</h3>
    
      <!-- Use declarative syntax to create the   -->
      <!-- menu structure. Create submenu items   -->
      <!-- by nesting them within parent menu     -->
      <!-- items.                                 -->
      <asp:menu id="NavigationMenu"
        staticdisplaylevels="1"
        staticsubmenuindent="10" 
        orientation="Vertical" 
        target="_blank"  
        runat="server">

        <items>
          <asp:menuitem navigateurl="Home.aspx" 
            text="Home"
            imageurl="Images\Home.gif"
            popoutimageurl="Images\Popout.jpg"   
            tooltip="Home">
            <asp:menuitem navigateurl="Music.aspx"
              text="Music"
              popoutimageurl="Images\Popout.jpg"
              tooltip="Music">
              <asp:menuitem navigateurl="Classical.aspx" 
                text="Classical"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Classical"/>
              <asp:menuitem navigateurl="Rock.aspx"
                text="Rock"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Rock"/>
              <asp:menuitem navigateurl="Jazz.aspx"
                text="Jazz"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Jazz"/>
            </asp:menuitem>
            <asp:menuitem navigateurl="Movies.aspx"
              text="Movies"
              popoutimageurl="Images\Popout.jpg"              
              tooltip="Movies">
              <asp:menuitem navigateurl="Action.aspx"
                text="Action"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Action"/>
              <asp:menuitem navigateurl="Drama.aspx"
                text="Drama"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Drama"/>
              <asp:menuitem navigateurl="Musical.aspx"
                text="Musical"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Musical"/>
            </asp:menuitem>
          </asp:menuitem>
        </items>
      
      </asp:menu>

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


<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head runat="server">
    <title>MenuItem Declarative Example</title>
</head>
<body>
    <form id="form1" runat="server">
    
      <h3>MenuItem Declarative Example</h3>
    
      <!-- Use declarative syntax to create the   -->
      <!-- menu structure. Create submenu items   -->
      <!-- by nesting them within parent menu     -->
      <!-- items.                                 -->
      <asp:menu id="NavigationMenu"
        staticdisplaylevels="1"
        staticsubmenuindent="10" 
        orientation="Vertical" 
        target="_blank"  
        runat="server">

        <items>
          <asp:menuitem navigateurl="Home.aspx" 
            text="Home"
            imageurl="Images\Home.gif"
            popoutimageurl="Images\Popout.jpg"   
            tooltip="Home">
            <asp:menuitem navigateurl="Music.aspx"
              text="Music"
              popoutimageurl="Images\Popout.jpg"
              tooltip="Music">
              <asp:menuitem navigateurl="Classical.aspx" 
                text="Classical"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Classical"/>
              <asp:menuitem navigateurl="Rock.aspx"
                text="Rock"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Rock"/>
              <asp:menuitem navigateurl="Jazz.aspx"
                text="Jazz"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Jazz"/>
            </asp:menuitem>
            <asp:menuitem navigateurl="Movies.aspx"
              text="Movies"
              popoutimageurl="Images\Popout.jpg"              
              tooltip="Movies">
              <asp:menuitem navigateurl="Action.aspx"
                text="Action"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Action"/>
              <asp:menuitem navigateurl="Drama.aspx"
                text="Drama"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Drama"/>
              <asp:menuitem navigateurl="Musical.aspx"
                text="Musical"
                separatorimageurl="Images\Separator.jpg"
                tooltip="Musical"/>
            </asp:menuitem>
          </asp:menuitem>
        </items>
      
      </asp:menu>

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

The following example demonstrates how to bind a Menu control to a SiteMapDataSource control. When bound to a data source, the Menu control automatically creates the MenuItem objects. For this example to work correctly, you must copy the sample site map data below to a file named Web.sitemap.


<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

  <!-- For the hover styles of the Menu control to  -->
  <!-- work correctly, you must include this head   -->
  <!-- element.                                     -->
  <head runat="server">
    <title>Menu DataBinding Example</title>
</head>

  <body>
    <form id="form1" runat="server">
    
      <h3>Menu DataBinding Example</h3>
    
      <!-- Bind the Menu control to a SiteMapDataSource control.  -->
      <asp:menu id="NavigationMenu"
        disappearafter="2000"
        staticdisplaylevels="2"
        staticsubmenuindent="10" 
        orientation="Vertical"
        font-names="Arial" 
        target="_blank"
        datasourceid="MenuSource"   
        runat="server">
        
        <staticmenuitemstyle backcolor="LightSteelBlue"
          forecolor="Black"/>
        <statichoverstyle backcolor="LightSkyBlue"/>
        <dynamicmenuitemstyle backcolor="Black"
          forecolor="Silver"/>
        <dynamichoverstyle backcolor="LightSkyBlue"
          forecolor="Black"/>

      </asp:menu>
      
      <asp:SiteMapDataSource id="MenuSource"
        runat="server"/>        

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


<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

  <!-- For the hover styles of the Menu control to  -->
  <!-- work correctly, you must include this head   -->
  <!-- element.                                     -->
  <head runat="server">
    <title>Menu DataBinding Example</title>
</head>

  <body>
    <form id="form1" runat="server">
    
      <h3>Menu DataBinding Example</h3>
    
      <!-- Bind the Menu control to a SiteMapDataSource control.  -->
      <asp:menu id="NavigationMenu"
        disappearafter="2000"
        staticdisplaylevels="2"
        staticsubmenuindent="10" 
        orientation="Vertical"
        font-names="Arial" 
        target="_blank"
        datasourceid="MenuSource"   
        runat="server">
        
        <staticmenuitemstyle backcolor="LightSteelBlue"
          forecolor="Black"/>
        <statichoverstyle backcolor="LightSkyBlue"/>
        <dynamicmenuitemstyle backcolor="Black"
          forecolor="Silver"/>
        <dynamichoverstyle backcolor="LightSkyBlue"
          forecolor="Black"/>

      </asp:menu>
      
      <asp:SiteMapDataSource id="MenuSource"
        runat="server"/>        

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

The following is sample site map data for the previous example.

<siteMap>

<siteMapNode url="~\Home.aspx"

title="Home"

description="Home">

<siteMapNode url="~\Music.aspx"

title="Music"

description="Music">

<siteMapNode url="~\Classical.aspx"

title="Classical"

description="Classical"/>

<siteMapNode url="~\Rock.aspx"

title="Rock"

description="Rock"/>

<siteMapNode url="~\Jazz.aspx"

title="Jazz"

description="Jazz"/>

</siteMapNode>

<siteMapNode url="~\Movies.aspx"

title="Movies"

description="Movies">

<siteMapNode url="~\Action.aspx"

title="Action"

description="Action"/>

<siteMapNode url="~\Drama.aspx"

title="Drama"

description="Drama"/>

<siteMapNode url="~\Musical.aspx"

title="Musical"

description="Musical"/>

</siteMapNode>

</siteMapNode>

</siteMap>

Remarks

A Menu control is made up of a hierarchy of menu items represented by MenuItem objects. Each menu item has a read-only Depth property that specifies the level at which the menu item is displayed in the Menu control. Menu items at the top level (level 0) that do not have a parent menu item are called root menu items. A menu item that has a parent menu item is called a submenu item. All root menu items are stored in the Items collection. Submenu items are stored in a parent menu item's ChildItems collection. You can access a menu item's parent menu item by using the Parent property.

Note

The Items and ChildItems collections contain only the menu items for the next level down. To access menu items further down the menu tree, use the ChildItems property of a subsequent menu item.

To create the menu items for a Menu control, use one of the following methods:

Use declarative syntax to create static menu items.

Use a constructor to dynamically create new instances of the MenuItem class. These MenuItem objects can then be added to the Items or ChildItems collection.

Bind the Menu control to a data source. When the Menu control is bound to a SiteMapDataSource control, MenuItem objects are automatically created that correspond to the items in the data source. For other data sources, MenuItem objects are also automatically created that match the hierarchy structure of data source; however, you must also use the DataBindings collection to define the menu item bindings that specify the binding relationship between a menu item and its corresponding data item.

The menu items are displayed in either a static menu or a dynamic menu, depending on its level. The static menu is always displayed in a Menu control. By default, the menu items at the top level (level 0) are displayed in the static menu. You can display additional menu levels (static submenus) within the static menu by setting the StaticDisplayLevels property. Menu items (if any) with a higher level than the value specified by the StaticDisplayLevels property are displayed in a dynamic submenu. A dynamic submenu appears only when the user positions the mouse pointer over the parent menu item that contains a dynamic submenu.

When the user clicks a menu item, the Menu control can either navigate to a linked Web page or simply post back to the server. If the NavigateUrl property of a menu item is set, the Menu control navigates to the linked page; otherwise, it posts the page back to the server for processing. By default, a linked page is displayed in the same window or frame as the Menu control. To display the linked content in a different window or frame, use the Target property of the Menu control.

Note

The Menu.Target property affects every menu item in the control. To specify a window or frame for an individual menu item, set the Target property of the MenuItem object directly.

Each menu item has a Text and a Value property. The value of the Text property is displayed in the Menu control, while the Value property is used to store any additional data about the menu item, such as data passed to the postback event associated with the menu item. If you set the Text property, but leave the Value property unset, the Value property is automatically set with the same value as the Text property. The opposite is also true. If you set the Value property, but not the Text property, the Text property is automatically set with the same value as the Value property.

Note

Menu items at the same menu level must each have a unique value for the Value property; the Menu control cannot distinguish between different menu items at the same level that have the same value. In this scenario, if the user clicks a menu item that has a duplicate value, the menu item that appears first in the menu is selected.

To display a ToolTip when the user positions the mouse pointer over a menu item, set the item's ToolTip property.

A Menu control has several different types of menu items. You can control the style (such as font size and color) for the different menu item types by using the properties in the following table.

Menu item style property Description
DynamicHoverStyle The style settings for a dynamic menu item when the mouse pointer is positioned over it.
DynamicMenuItemStyle The style settings for an individual dynamic menu item.
DynamicMenuStyle The style settings for a dynamic menu.
DynamicSelectedStyle The style settings for the currently selected dynamic menu item.
StaticHoverStyle The style settings for a static menu item when the mouse pointer is positioned over it.
StaticMenuItemStyle The style settings for an individual static menu item.
StaticMenuStyle The style settings for a static menu.
StaticSelectedStyle The style settings for the currently selected static menu item.

Instead of setting the individual style properties, you can specify styles that are applied to menu items based on their level by using the style collections shown in the following table.

Level style collections Description
LevelMenuItemStyles A collection of MenuItemStyle objects that control the style of the menu items based on their level.
LevelSelectedStyles A collection of MenuItemStyle objects that control the style of selected menu items based on their level.
LevelSubMenuStyles A collection of MenuItemStyle objects that control the style of the submenu items based on their level.

The first style in the collection corresponds to the style of the menu items at the first depth level in the menu tree. The second style in the collection corresponds to the style of the menu items at the second depth level in the menu tree, and so on. This is most often used to generate table of contents-style navigation menus where menu items at a certain depth should have the same appearance, regardless of whether they have submenus.

Note

If you use any of the level style collections listed in the previous table to define the style for the Menu control, these style settings override the individual menu item style properties.

In addition to customizing a menu item's style, you can also customize its appearance. You can specify custom images for the different parts for a menu item by setting the properties in the following table.

Image property Description
ImageUrl An optional image displayed next to the text of a menu item.
PopOutImageUrl An optional image displayed in a menu item to indicate that the menu item has a dynamic submenu.
SeparatorImageUrl An optional image displayed at the bottom of a menu item to separate it from other menu items.

To determine whether a menu item is currently selected in a Menu control, use the Selected property. You can also determine whether a menu item is bound to data by using the DataBound property. If a menu item is bound to data, you can use the DataItem property to access the values of the data item bound to the menu item.

For a list of initial property values for an instance of the MenuItem class, see the MenuItem constructor.

Constructors

MenuItem()

Initializes a new instance of the MenuItem class without menu text or a value.
MenuItem(String)

Initializes a new instance of the MenuItem class using the specified menu text.
MenuItem(String, String)

Initializes a new instance of the MenuItem class using the specified menu text and value.
MenuItem(String, String, String)

Initializes a new instance of the MenuItem class using the specified menu text, value, and URL to an image.
MenuItem(String, String, String, String)

Initializes a new instance of the MenuItem class using the specified menu text, value, image URL, and navigation URL.
MenuItem(String, String, String, String, String)

Initializes a new instance of the MenuItem class using the specified menu text, value, image URL, navigation URL, and target.

Properties

ChildItems

Gets a MenuItemCollection object that contains the submenu items of the current menu item.
DataBound

Gets a value indicating whether the menu item was created through data binding.
DataItem

Gets the data item that is bound to the menu item.
DataPath

Gets the path to the data that is bound to the menu item.
Depth

Gets the level at which a menu item is displayed.
Enabled

Gets or sets a value that indicates whether the MenuItem object is enabled, allowing the item to display a pop-out image and any child menu items.
ImageUrl

Gets or sets the URL to an image that is displayed next to the text in a menu item.
NavigateUrl

Gets or sets the URL to navigate to when the menu item is clicked.
Parent

Gets the parent menu item of the current menu item.
PopOutImageUrl

Gets or sets the URL to an image that is displayed in a menu item to indicate that the menu item has a dynamic submenu.
Selectable

Gets or sets a value that indicates whether the MenuItem object can be selected, or is "clickable."
Selected

Gets or sets a value indicating whether the current menu item is selected in a Menu control.
SeparatorImageUrl

Gets or sets the URL to an image displayed at the bottom of a menu item to separate it from other menu items.
Target

Gets or sets the target window or frame in which to display the Web page content associated with a menu item.
Text

Gets or sets the text displayed for the menu item in a Menu control.
ToolTip

Gets or sets the ToolTip text for the menu item.
Value

Gets or sets a non-displayed value used to store any additional data about the menu item, such as data used for handling postback events.
ValuePath

Gets the path from the root menu item to the current menu item.

Methods

Equals(Object)

Determines whether the specified object is equal to the current object.

(Inherited from Object)
GetHashCode()

Serves as the default hash function.

(Inherited from Object)
GetType()

Gets the Type of the current instance.

(Inherited from Object)
MemberwiseClone()

Creates a shallow copy of the current Object.

(Inherited from Object)
ToString()

Returns a string that represents the current object.

(Inherited from Object)

Explicit Interface Implementations

ICloneable.Clone()

Creates a copy of the current MenuItem object.
IStateManager.IsTrackingViewState

Gets a value that indicates whether the MenuItem object is saving changes to its view state.
IStateManager.LoadViewState(Object)

Loads the menu item's previously saved view state.
IStateManager.SaveViewState()

Saves the view-state changes to an Object.
IStateManager.TrackViewState()

Instructs the MenuItem object to track changes to its view state.

Applies to

See also