jqwidgets-framework/demos/Angular/src/menu/images/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 #jqxMenu
           [mode]="'vertical'"
           [width]="150"
           [height]="225">
    <ul>
      <li>
        <img style='float: left; margin-right: 5px;' src='./../../../images/mailIcon.png' /><span>Mail</span>
      </li>
      <li>
        <img style='float: left; margin-right: 5px;' src='./../../../images/calendarIcon.png' /><span>Calendar</span>
      </li>
      <li>
        <img style='float: left; margin-right: 5px;' src='./../../../images/contactsIcon.png' /><span>Contacts</span>
      </li>
      <li>
        <img style='float: left; margin-right: 5px;' src='./../../../images/folder.png' /><span>
          <span>Inbox</span>
        </span>
        <ul>
          <li>
            <img style='float: left; margin-right: 5px;' src='./../../../images/folder.png' /><span>jQWidgets</span>
            <ul>
              <li>
                <img style='float: left; margin-right: 5px;' src='./../../../images/folder.png' /><span>Admin</span>
              </li>
              <li>
                <img style='float: left; margin-right: 5px;' src='./../../../images/folder.png' /><span>Corporate</span>
              </li>
              <li>
                <img style='float: left; margin-right: 5px;' src='./../../../images/folder.png' /><span>Finance</span>
              </li>
              <li>
                <img style='float: left; margin-right: 5px;' src='./../../../images/folder.png' /><span>Other</span>
              </li>
            </ul>
          </li>
          <li>
            <img style='float: left; margin-right: 5px;' src='./../../../images/folder.png' /><span>Personal</span>
          </li>
        </ul>
      </li>
      <li>
        <img style='float: left; margin-right: 5px;' src='./../../../images/recycle.png' />
        <span>Deleted Items</span>
        <ul>
          <li>
            <img style='float: left; margin-right: 5px;' src='./../../../images/folder.png' /><span>Today</span>
          </li>
          <li>
            <img style='float: left; margin-right: 5px;' src='./../../../images/folder.png' /><span>
              Last
              Week
            </span>
          </li>
          <li>
            <img style='float: left; margin-right: 5px;' src='./../../../images/folder.png' /><span>
              Last
              Month
            </span>
          </li>
        </ul>
      </li>
      <li>
        <img style='float: left; margin-right: 5px;' src='./../../../images/settings.png' /><span>Settings</span>
        <ul style="width: 230px;">
          <li>            
            <jqxCheckBox style='float: left; margin-right: 5px;' #checkbox [checked]="true">
            </jqxCheckBox>            
            Enable Auto-Save
          </li>
          <li>
            <jqxCheckBox style='float: left; margin-right: 5px;' #checkbox2>
            </jqxCheckBox>
            Send email as anonymous
          </li>
          <li>
            <jqxCheckBox style='float: left; margin-right: 5px;' #checkbox3>
            </jqxCheckBox>
            Save sent emails
          </li>
        </ul>
      </li>
      <li>
        <img style='float: left; margin-right: 5px;' src='./../../../images/notesIcon.png' /><span>Notes</span>
      </li>
      <li>
        <img style='float: left; margin-right: 5px;' src='./../../../images/favorites.png' /><span>Favorites</span>
      </li>
    </ul>
  </jqxMenu>
</div>