jqwidgets-framework/demos/Angular/src/ribbon/events/app.component.html

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

<jqxRibbon #jqxRibbon
           (onSelect)="select($event)"
           (onUnselect)="unselect($event)"
           [width]="360"
           [height]="300"
           [position]="'top'"
           [selectionMode]="'click'"
           [animationType]="'fade'">
  <ul>
    <li style="margin-left: 30px;">Browse Books</li>
    <li>Shipping</li>
    <li>About Us</li>
  </ul>
  <div>
    <div>
      <table>
        <tr>
          <td>
            <b>Fiction</b>
          </td>
          <td>
            <b>Biography</b>
          </td>
          <td>
            <b>Science</b>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">Adventure</a>
          </td>
          <td>
            <a href="#">Biography: General</a>
          </td>
          <td>
            <a href="#">Astronomy</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">Classics</a>
          </td>
          <td>
            <a href="#">Diaries, Letters & Journals</a>
          </td>
          <td>
            <a href="#">Biology</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">Historical Fiction</a>
          </td>
          <td>
            <a href="#">Memoirs</a>
          </td>
          <td>
            <a href="#">Geography</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">Romance</a>
          </td>
          <td>
            <b>Food & Drink</b>
          </td>
          <td>
            <a href="#">Mathematics</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">Science Fiction</a>
          </td>
          <td>
            <a href="#">General Cookery</a>
          </td>
          <td>
            <a href="#">Physics</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">Thrillers</a>
          </td>
          <td>
            <a href="#">National Cuisine</a>
          </td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <a href="#">Quick & Easy Cooking</a>
          </td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <a href="#">Vegetarian Cookery</a>
          </td>
          <td>
            <a href="#">More books >></a>
          </td>
        </tr>
      </table>
    </div>
    <div>
      <table>
        <tr>
          <td>
            <a href="#">Countries we ship to</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">Delivery options</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">Order cancellation and returns</a>
          </td>
        </tr>
      </table>
    </div>
    <div>
      <table>
        <tr>
          <td>
            <a href="#">Contact us</a>
          </td>
          <td rowspan="3" style="width: 125px;"></td>
          <td rowspan="3">
            <img src="./../../../images/bookshop.png" />
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">Jobs</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#">Affiliates</a>
          </td>
        </tr>
      </table>
    </div>
  </div>
</jqxRibbon>
<div style="margin-top: 30px; font-weight: bold;">
  Events:
</div>
<jqxPanel #log style="border-width: 0px;" [height]="250" [width]="200">
</jqxPanel>