jqwidgets-scripts-custom/demos/Angular/navbar/defaultfunctionality/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<div style="width: 80%;">
  NavBar with 2 Items. Each item is with 50% width.
  <br />
  <jqxNavBar [theme]="'material'" id="navBar1" [height]="40" [selectedItem]="0">
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </jqxNavBar>
  <br />
  NavBar with 3 Items. Each item is with 33.33% width.
  <br />
  <jqxNavBar [theme]="'material'" id="navBar2" [height]="40" [selectedItem]="0">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </jqxNavBar>
  <br />
  NavBar with 4 Items. Each item is with 25% width.
  <br />
  <jqxNavBar [theme]="'material'" id="navBar3" [height]="40" [selectedItem]="0">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </jqxNavBar>
  <br />
  NavBar with 5 Items. Each item is with 20% width.
  <br />
  <jqxNavBar [theme]="'material'" id="navBar4" [height]="40" [selectedItem]="0">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </jqxNavBar>
  <br />
  NavBar with more than 5 Items. Items are displayed in 2 columns and each item is with 50% width.
  <br />
  <jqxNavBar [theme]="'material'" id="navBar5" [height]="160" [selectedItem]="0">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </jqxNavBar>
  <br />
  NavBar with "columns" set to ["30%", "50%", "20%"].
  <br />
  <jqxNavBar [theme]="'material'" id="navBar6" [height]="40" [selectedItem]="0" [columns]="['30%', '50%', '20%']">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </jqxNavBar>
</div>