{{ overviewIntro }}

{{ i18n.t.common.sectionDescription }}

{{ descriptionBody }}

{{ i18n.t.common.sectionFeatures }}

{{ item }}

{{ i18n.t.common.sectionLimitations }}

{{ item }}

{{ basicNavsTitle }}

{{ basicNavsBody }}

{{ verticalPillsTitle }}

{{ verticalPillsBody }}

{{ currentStateTitle }}

{{ eventLog }}

{{ apiIntro }}

{{ item }}

<ul liNav #nav="liNav" class="nav nav-tabs" [(activeId)]="activeId">
  <li [liNavItem]="1">
    <button liNavLink>First</button>
    <template liNavContent>First content</template>
  </li>
  <li [liNavItem]="2">
    <button liNavLink>Second</button>
    <template liNavContent>Second content</template>
  </li>
</ul>

<div [liNavOutlet]="nav"></div>

<div
  liNav
  orientation="vertical"
  keyboard="changeWithArrows"
  [activeId]="verticalActiveId"
  (activeIdChange)="verticalActiveId = $event">
  <div liNavItem="overview">
    <button liNavLink>Overview</button>
    <template liNavContent>...</template>
  </div>
</div>