jqwidgets-framework/demos/Angular/src/menu/defaultfunctionality/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<div #jqxWidget style="height: 300px;">
  <jqxMenu #menuReference [width]="getWidth()" [height]="30">
    <ul>
      <li><a href="#Home">Home</a></li>
      <li>
        Solutions
        <ul style="width: 250px;">
          <li><a href="#Education">Education</a></li>
          <li><a href="#Financial">Financial services</a></li>
          <li><a href="#Government">Government</a></li>
          <li><a href="#Manufacturing">Manufacturing</a></li>
          <li type="separator"></li>
          <li>
            Software Solutions
            <ul style="width: 220px;">
              <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
              <li><a href="#Mobile">Mobile</a></li>
              <li><a href="#RIA">Rich Internet applications</a></li>
              <li><a href="#TechnicalCommunication">Technical communication</a></li>
              <li><a href="#Training">Training and eLearning</a></li>
              <li><a href="#WebConferencing">Web conferencing</a></li>
            </ul>
          </li>
          <li><a href="#">All industries and solutions</a></li>
        </ul>
      </li>
      <li>
        Products
        <ul>
          <li><a href="#PCProducts">PC products</a></li>
          <li><a href="#MobileProducts">Mobile products</a></li>
          <li><a href="#AllProducts">All products</a></li>
        </ul>
      </li>
      <li>
        Support
        <ul style="width: 200px;">
          <li><a href="#SupportHome">Support home</a></li>
          <li><a href="#CustomerService">Customer Service</a></li>
          <li><a href="#KB">Knowledge base</a></li>
          <li><a href="#Books">Books</a></li>
          <li><a href="#Training">Training and certification</a></li>
          <li><a href="#SupportPrograms">Support programs</a></li>
          <li><a href="#Forums">Forums</a></li>
          <li><a href="#Documentation">Documentation</a></li>
          <li><a href="#Updates">Updates</a></li>
        </ul>
      </li>
      <li>
        Communities
        <ul style="width: 200px;">
          <li><a href="#Designers">Designers</a></li>
          <li><a href="#Developers">Developers</a></li>
          <li><a href="#Educators">Educators and students</a></li>
          <li><a href="#Partners">Partners</a></li>
          <li type="separator"></li>
          <li>
            By resource
            <ul>
              <li><a href="#Labs">Labs</a></li>
              <li><a href="#TV">TV</a></li>
              <li><a href="#Forums">Forums</a></li>
              <li><a href="#Exchange">Exchange</a></li>
              <li><a href="#Blogs">Blogs</a></li>
              <li><a href="#Experience Design">Experience Design</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        Company
        <ul style="width: 180px;">
          <li><a href="#About">About Us</a></li>
          <li><a href="#Press">Press</a></li>
          <li><a href="#Investor">Investor Relations</a></li>
          <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
          <li><a href="#Careers">Careers</a></li>
          <li><a href="#Showcase">Showcase</a></li>
          <li><a href="#Events">Events</a></li>
          <li><a href="#ContactUs">Contact Us</a></li>
          <li><a href="#Become an affiliate">Become an affiliate</a></li>
        </ul>
      </li>
    </ul>
  </jqxMenu>
  <br />
  <div style="margin-left: 60px;  margin-top: 120px;">
    <div style="font-size: 16px; font-family: Verdana Arial;">
      Settings
    </div>
    <div style="margin-top: 20px; font-size: 14px; font-family: Verdana Arial; float: left;">
      <jqxCheckBox (onChange)="animationOnChange($event)"
                   [width]="150" [height]="20" [checked]="true">
        Enable Animation
      </jqxCheckBox>
      <div style="margin-top: 20px;">
        <jqxCheckBox style="margin-top: 20px;" (onChange)="disabledOnChange($event)"
                     [width]="150" [height]="20" [checked]="false">
          Disabled
        </jqxCheckBox>
      </div>
    </div>
    <div style="margin-top: 20px; margin-left: 60px; font-size: 14px; font-family: Verdana Arial; float: left;">
      <jqxCheckBox (onChange)="hoverOnChange($event)"
                   [width]="150" [height]="20" [checked]="true">
        Enable Hover
      </jqxCheckBox>
      <div style="margin-top: 20px;">
        <jqxCheckBox (onChange)="openOnChange($event)"
                     [width]="150" [height]="20" [checked]="true">
          Auto Open
        </jqxCheckBox>
      </div>
    </div>
    <div style="margin-top: 20px; margin-left: 60px; font-size: 14px; font-family: Verdana Arial; float: left;">
      <jqxCheckBox (onChange)="topLevelArrowsOnChange($event)"
                   [width]="200" [height]="20">
        Show Top-Level Arrows
      </jqxCheckBox>
    </div>
  </div>
</div>