asp.net.ph

Skip Navigation Links

Customizing the Menu Control User Interface

Controls You Can Use on Web Forms   ASP.NET Navigation Controls   Menu Control


The Menu control exposes several properties to specify the visual rendering of the menu items in the control. The following table lists the available menu item styles you can specify for the Menu.

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 following style collections.

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

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.

Another way to alter the appearance of the control is to customize the images displayed in the Menu control. You can specify your own custom image for the different parts of the control by setting the properties shown in the following table.

Image property Description
DynamicBottomSeparatorImageUrl An optional image displayed at the bottom of a dynamic menu item to separate it from other menu items.
DynamicPopOutImageUrl An optional image displayed in a dynamic menu item to indicate that it has a submenu.
DynamicTopSeparatorImageUrl An optional image displayed at the top of a dynamic menu item to separate it from other menu items.
ScrollDownImageUrl The image displayed at the bottom of a menu item to indicate that the user can scroll down to view additional menu items.
ScrollUpImageUrl The image displayed at the top of a menu item to indicate that the user can scroll up to view additional menu items.
StaticBottomSeparatorImageUrl An optional image displayed at the bottom of a static menu item to separate it from other menu items.
StaticPopOutImageUrl An optional image displayed in a static menu item to indicate that it has a submenu.
StaticTopSeparatorImageUrl An optional image displayed at the top of a static menu item to separate it from other menu items.

Templates for Control Layout

The Menu control supports additional customization through templates, which offer more control over the rendering of certain elements. The following table lists the template types you can specify for the Menu.

Template property Description
DynamicItemTemplate The template that contains the custom content to render for a dynamic menu item.
StaticItemTemplate The template that contains the custom content to render for a static menu item.

You can control the vertical and horizontal position of a dynamic menu relative to its parent menu item by setting the DynamicVerticalOffset and DynamicHorizontalOffset properties, respectively. To control the indentation of the static submenu items within a static menu, use the StaticSubMenuIndent property.

See Also

Responding to Menu Item Events   Web Forms Server Controls and CSS Styles



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note