Nav

<c-bs-nav as_="ul">
  <c-bs-nav-item>
    <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
  </c-bs-nav-item>
</c-bs-nav>

<c-bs-nav>
  <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  <c-bs-nav-link href="#">Link</c-bs-nav-link>
  <c-bs-nav-link href="#">Link</c-bs-nav-link>
  <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
</c-bs-nav>

<c-bs-nav variant="tabs" as_="ul">
  <c-bs-nav-item>
    <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
  </c-bs-nav-item>
</c-bs-nav>

<c-bs-nav variant="pills" as_="ul">
  <c-bs-nav-item>
    <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
  </c-bs-nav-item>
</c-bs-nav>

<c-bs-nav variant="underline" as_="ul">
  <c-bs-nav-item>
    <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
  </c-bs-nav-item>
</c-bs-nav>

<c-bs-nav c-vertical="True" as_="ul">
  <c-bs-nav-item>
    <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
  </c-bs-nav-item>
</c-bs-nav>

<c-bs-nav c-vertical="True">
  <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  <c-bs-nav-link href="#">Link</c-bs-nav-link>
  <c-bs-nav-link href="#">Link</c-bs-nav-link>
  <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
</c-bs-nav>

<c-bs-nav variant="pills" c-fill="True" as_="ul">
  <c-bs-nav-item>
    <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Much longer nav link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
  </c-bs-nav-item>
</c-bs-nav>

<c-bs-nav variant="pills" c-fill="True">
  <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  <c-bs-nav-link href="#">Much longer nav link</c-bs-nav-link>
  <c-bs-nav-link href="#">Link</c-bs-nav-link>
  <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
</c-bs-nav>

<c-bs-nav variant="pills" c-justified="True" as_="ul">
  <c-bs-nav-item>
    <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Much longer nav link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link href="#">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
  </c-bs-nav-item>
</c-bs-nav>

<c-bs-nav variant="pills" c-justified="True">
  <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  <c-bs-nav-link href="#">Much longer nav link</c-bs-nav-link>
  <c-bs-nav-link href="#">Link</c-bs-nav-link>
  <c-bs-nav-link c-disabled="True">Disabled</c-bs-nav-link>
</c-bs-nav>

<c-bs-nav variant="pills" as_="ul">
  <c-bs-nav-item>
    <c-bs-nav-link as_="button" c-active="True">Active</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link as_="button">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link as_="button">Link</c-bs-nav-link>
  </c-bs-nav-item>
  <c-bs-nav-item>
    <c-bs-nav-link as_="button" c-disabled="True">Disabled</c-bs-nav-link>
  </c-bs-nav-item>
</c-bs-nav>

<c-bs-nav c-attrs="{'class': 'custom-nav'}">
  <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  <c-bs-nav-link href="#">Link</c-bs-nav-link>
</c-bs-nav>

<c-bs-nav role="tablist">
  <c-bs-nav-link c-active="True" href="#">Active</c-bs-nav-link>
  <c-bs-nav-link href="#">Link</c-bs-nav-link>
</c-bs-nav>