Wijmo Open for Juice UI Extender Controls / WijMenu / WijMenu Task-Based Help / Using Menu Templates
Using Menu Templates

The WijMenu control supports using templates for menu items. In this topic, you will create a menu using a template.

  1. Create an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
  2. Add a standard Panel control to the main content of your page.
  3. Add the following markup within the <asp:Panel> tags to create a list that will become the menu.
    <ul id="menu1">
    
       <li><a href="#">MenuItem</a></li>
    
       <li><a href="#">Breaking News</a>
    
           <ul>
    
           <li class="header">
    
           </li>
    
           <li class="header">
    
           </li>
    
           </ul>
    
           </li>
    
  4. Add the following markup within the first set of  <li class="header"> tags.
    <Template>
    
    <div>
    
          <a href="#" class="wijmo-wijmenu-text">New</a><span class="wijmo-wijmenu-icon-right">Ctrl+N</span>
    
          </div>
    
          </Template>
    
  5. Add the following markup within the second set of <li class="header"> tags.
    <Template>
    
    <div>
    
          <a href="#" class="wijmo-wijmenu-text">Close</a><span class="wijmo-wijmenu-icon-right">Ctrl+C</span>
    
          </div>
    
          </Template>
    
  6. Press F5 to run your application. The menu should resemble the following image.