New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

PanelBar And Menu

  • My Favorites
      • Finance
        • Stocks
        • Bonds
        • Mutual Funds
          • International Funds
          • Stock Funds
          • Personal Funds
        • Insurance
      • Real Estate
        • Villas
          • France
          • Spain
          • Ireland
        • Houses
        • Apartments
      • Leisure
        • Sports
        • Movies
        • Clubs
          • Babbles
          • Space
          • The Jumping Cat
        • Family
      • Internet
        • Search Engines
          • Google
          • Yahoo!
        • Portals
      • Health
        • SPA
        • Fitness
        • Pharmacy
  • My Office
      • Address Book
        • Friends
        • Partners
        • Co-workers
          • Finance
          • Marketing
          • Production
        • Others
      • Schedule
        • Monthly Schedule
          • January
          • February
          • March
        • Daily Schedule
        • 5 Year Plan
      • Projects
        • 2006 Budget
        • Office Space
        • Marketing
          • Rebranding
          • Product Roadmap
          • Advertising
        • Family
      • Fun
        • Search Engines
          • Google
          • Yahoo!
        • Portals

You can easily integrate RadPanelBar with RadMenu. This example shows one such approach. RadMenu is embedded in the ItemTemplate of the panel items.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
     <div class="demo-container size-thin">
        <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelbar1" runat="server" Width="100%">
            <Items>
                <telerik:RadPanelItem Text="My Favorites">
                    <Items>
                        <telerik:RadPanelItem>
                            <ItemTemplate>
                                <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" Flow="Vertical" Width="100%">
                                    <Items>
                                        <telerik:RadMenuItem Text="Finance">
                                            <Items>
                                                <telerik:RadMenuItem Text="Stocks" />
                                                <telerik:RadMenuItem Text="Bonds" />
                                                <telerik:RadMenuItem Text="Mutual Funds">
                                                    <Items>
                                                        <telerik:RadMenuItem Text="International Funds" />
                                                        <telerik:RadMenuItem Text="Stock Funds" />
                                                        <telerik:RadMenuItem Text="Personal Funds" />
                                                    </Items>
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Insurance" />
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Real Estate">
                                            <Items>
                                                <telerik:RadMenuItem Text="Villas">
                                                    <Items>
                                                        <telerik:RadMenuItem Text="France" />
                                                        <telerik:RadMenuItem Text="Spain" />
                                                        <telerik:RadMenuItem Text="Ireland" />
                                                    </Items>
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Houses" />
                                                <telerik:RadMenuItem Text="Apartments" />
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Leisure">
                                            <Items>
                                                <telerik:RadMenuItem Text="Sports" />
                                                <telerik:RadMenuItem Text="Movies" />
                                                <telerik:RadMenuItem Text="Clubs">
                                                    <Items>
                                                        <telerik:RadMenuItem Text="Babbles" />
                                                        <telerik:RadMenuItem Text="Space" />
                                                        <telerik:RadMenuItem Text="The Jumping Cat" />
                                                    </Items>
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Family" />
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Internet">
                                            <Items>
                                                <telerik:RadMenuItem Text="Search Engines">
                                                    <Items>
                                                        <telerik:RadMenuItem Text="Google" />
                                                        <telerik:RadMenuItem Text="Yahoo!" />
                                                    </Items>
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Portals" />
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Health">
                                            <Items>
                                                <telerik:RadMenuItem Text="SPA" />
                                                <telerik:RadMenuItem Text="Fitness" />
                                                <telerik:RadMenuItem Text="Pharmacy" />
                                            </Items>
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenu>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="My Office" Expanded="true">
                    <Items>
                        <telerik:RadPanelItem>
                            <ItemTemplate>
                                <telerik:RadMenu RenderMode="Lightweight" ID="Radmenu2" runat="server" Flow="Vertical" Width="100%" Style="z-index: 7000">
                                    <Items>
                                        <telerik:RadMenuItem Text="Address Book">
                                            <Items>
                                                <telerik:RadMenuItem Text="Friends" />
                                                <telerik:RadMenuItem Text="Partners" />
                                                <telerik:RadMenuItem Text="Co-workers">
                                                    <Items>
                                                        <telerik:RadMenuItem Text="Finance" />
                                                        <telerik:RadMenuItem Text="Marketing" />
                                                        <telerik:RadMenuItem Text="Production" />
                                                    </Items>
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Others" />
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Schedule">
                                            <Items>
                                                <telerik:RadMenuItem Text="Monthly Schedule">
                                                    <Items>
                                                        <telerik:RadMenuItem Text="January" />
                                                        <telerik:RadMenuItem Text="February" />
                                                        <telerik:RadMenuItem Text="March" />
                                                    </Items>
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Daily Schedule" />
                                                <telerik:RadMenuItem Text="5 Year Plan" />
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Projects">
                                            <Items>
                                                <telerik:RadMenuItem Text="2006 Budget" />
                                                <telerik:RadMenuItem Text="Office Space" />
                                                <telerik:RadMenuItem Text="Marketing">
                                                    <Items>
                                                        <telerik:RadMenuItem Text="Rebranding" />
                                                        <telerik:RadMenuItem Text="Product Roadmap" />
                                                        <telerik:RadMenuItem Text="Advertising" />
                                                    </Items>
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Family" />
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Fun">
                                            <Items>
                                                <telerik:RadMenuItem Text="Search Engines">
                                                    <Items>
                                                        <telerik:RadMenuItem Text="Google" />
                                                        <telerik:RadMenuItem Text="Yahoo!" />
                                                    </Items>
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Portals" />
                                            </Items>
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenu>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
            <ExpandAnimation Type="None" />
            <CollapseAnimation Type="None" />
        </telerik:RadPanelBar>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance