RadMenu for ASP.NET
Table of Contents
Layout (Vertical/Horizontal flow) Send comments on this topic.
See Also
Feature overview > Layout (Vertical/Horizontal flow)

Glossary Item Box

Telerik RadMenu supports Horizontal (default) and Vertical layouts. The layout of the menu is controlled by the Flow property of the menu class.

If an item has child items, the Flow can be set for the child group trough the Flow property of the MenuItemGroupSettings class.

To illustrate the point, consider the following example:

  Copy Code
<rad:RadMenu ID="RadMenu1" Skin="Outlook" Flow="Horizontal" runat="server">
   <Items >
       <rad:RadMenuItem runat="server" Text="Root RadMenuItem">
       </rad:RadMenuItem>
       <rad:RadMenuItem runat="server" Text="This">
           <Items>
               <rad:RadMenuItem runat="server" Text="Child RadMenuItem">
               </rad:RadMenuItem>
               <rad:RadMenuItem runat="server" Text="Child RadMenuItem">
               </rad:RadMenuItem>
               <rad:RadMenuItem runat="server" Text="Child RadMenuItem">
               </rad:RadMenuItem>
               <rad:RadMenuItem runat="server" Text="Child RadMenuItem">
               </rad:RadMenuItem>
           </Items>
           <GroupSettings Flow="Horizontal" />
       </rad:RadMenuItem>
       <rad:RadMenuItem runat="server" Text="Root RadMenuItem">
       </rad:RadMenuItem>
   </Items>
</rad:RadMenu>

 

The code above sets the flow for the root group and for a child group to Horizontal. The result is:

 

Flow

 

A vertical menu is rendered when the Flow property is set to Vertical.

Example

The example below shows a vertical menu as defined by the Flow property of RadMenu.

A vertical menu

 

 

 

 

 

 

 

 

 

ASPX Copy Code
<rad:RadMenu id="RadMenu1" runat="server" Flow="Vertical">
   <Items>
       <rad:RadMenuItem runat="server" Text="Company"></rad:RadMenuItem>
       <rad:RadMenuItem runat="server" Text="Products">
           <Items>
               <rad:RadMenuItem runat="server" Text="Try"></rad:RadMenuItem>
               <rad:RadMenuItem runat="server" Text="Purchase"></rad:RadMenuItem>
           </Items>
       </rad:RadMenuItem>
       <rad:RadMenuItem runat="server" Text="Services"></rad:RadMenuItem>
       <rad:RadMenuItem runat="server" Text="Support"></rad:RadMenuItem>
       <rad:RadMenuItem runat="server" Text="Contact Us"></rad:RadMenuItem>
   </Items>
</rad:RadMenu>

See Also