ASP.NET Menu Control

Navigation is nice. And so is implementing navigation easily. It is really cool that ASP.NET and Visual Studio will help us with this, with the Menu control.

In your toolbox, go to the "Navigation" tab and double click "Menu" on the list. This will add a new menu control to your page. The Menu control is easier to use in design mode, so switch to design mode.

If you hover over your menu control, the smart tag should appear (the little arrow usually to the right). It gives us some options (I won't list all of them here):

• Auto format: This will open a dialog to quickly apply themes to your menu control. Go ahead, select one.
• Views: (Static or Dynamic): Static view is where the links for your menu are always visible on the screen. Useful if you want something similar to a navigation bar at the top of the screen. Dynamic: allows for some fancy animations and other useful features. Useful if you want to preserve screen real-estate.
• Edit Menu Items: This will open a dialog where you can add items to your menu. Root items will appear on the menu bar and children items will appear below their corresponding root items.

How to change the orientation of the menu control:

After you select your menu control, go to the properties page of Visual Studio and find "Orientation". It has two possibilities: Horizontal or Vertical. Just like you would think, Horizontal gives the menu control a horizontal orientation and vertical gives the menu control a vertical orientation.

To do this in code:

However, this can be accomplished through the code window. I will show you the code, and then explain it.

1.  <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
2.         <Items>
3.             <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
4.             <asp:MenuItem Text="About Us" Value="About Us"></asp:MenuItem>
5.             <asp:MenuItem Text="Contact Us" Value="Contact Us"></asp:MenuItem>
6.             <asp:MenuItem Text="Services" Value="Services">
7.                 <asp:MenuItem Text="I Break Code Blog" Value="I Break Code Blog"></asp:MenuItem>
8.                 <asp:MenuItem Text="Open Source Software" Value="Open Source Software">
9.                 </asp:MenuItem>
10.             </asp:MenuItem>
11.         </Items>
13.  </asp:Menu>

Lines 1 and 13 define the region of code which will contain the ASP.NET Menu Control. The Menu Control is contained between the <asp:Menu> tag and the </asp:Menu> tag. If you notice, the <asp:Menu> tag has a few attributes associated with it in this example:

• runat: Determines where an element is processed. 'Server' controls are processed before the website is sent to the browser.
• Orientation: gets or sets the direction in which to render the Menu control.

Lines 2 and 11 define the region of code where the ASP.NET Menu Control items are defined. The Menu Control items are contained between the <Items> tag and the </Items> tag.

The individual ASP.NET Menu Control items are defined with the <asp:MenuItem> and </asp:MenuItem> tags.

If you look at this code: <asp:MenuItem Text="About Us" Value="About Us"></asp:MenuItem>

you will see the attributes 'Text' and 'Value':

• The 'Text' attribute sets the text displayed in the ASP.NET Menu Control
• The 'Value' attribute sets the text associated with the Menu Control that will not be displayed on the ASP.NET Menu Control

External Resources Related To: ASP.NET Menu Control

MSDN ASP.NET Menu Class information

MSDN ASP.NET MenuItem Class information

Building an ASP.NET Menu Server Control