Navbar

<c-bs-navbar expand="lg" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Brand</c-bs-navbar-brand>
  <c-bs-navbar-toggler />
  <c-bs-navbar-collapse>
    <c-bs-navbar-nav>
      <c-bs-nav-item>
        <c-bs-nav-link href="#" c-active="True">Home</c-bs-nav-link>
      </c-bs-nav-item>
      <c-bs-nav-item>
        <c-bs-nav-link href="#">Features</c-bs-nav-link>
      </c-bs-nav-item>
      <c-bs-nav-item>
        <c-bs-nav-link href="#">Pricing</c-bs-nav-link>
      </c-bs-nav-item>
      <c-bs-nav-item>
        <c-bs-nav-link href="#" c-disabled="True">Disabled</c-bs-nav-link>
      </c-bs-nav-item>
    </c-bs-navbar-nav>
  </c-bs-navbar-collapse>
</c-bs-navbar>

<c-bs-navbar expand="sm" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Brand</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="md" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Brand</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="xl" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Brand</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="xxl" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Brand</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="lg" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Navbar</c-bs-navbar-brand>
  <form class="d-flex" role="search">
    <c-bs-form-control type="search" placeholder="Search" c-attrs="{'class': 'me-2', 'aria-label': 'Search'}" />
    <c-bs-button variant="success" c-outline="True" type="submit">Search</c-bs-button>
  </form>
</c-bs-navbar>

<c-bs-navbar c-attrs="{'class': 'bg-light'}">
  <c-bs-navbar-brand href="#">Navbar</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar c-attrs="{'class': 'bg-primary', 'data-bs-theme': 'dark'}">
  <c-bs-navbar-brand href="#">Navbar</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="lg" container="sm" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Navbar</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="lg" container="md" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Navbar</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="lg" container="lg" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Navbar</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="lg" container="xl" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Navbar</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="lg" container="xxl" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Navbar</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Disabled Brand</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="lg" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">
    <img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24" class="d-inline-block align-text-top" />
    Bootstrap
  </c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Navbar w/ text</c-bs-navbar-brand>
  <c-bs-navbar-text>Navbar text with an inline element</c-bs-navbar-text>
</c-bs-navbar>

<c-bs-navbar variant="dark" c-attrs="{'class': 'navbar-dark bg-dark'}">
  <c-bs-navbar-brand href="#">Navbar</c-bs-navbar-brand>
</c-bs-navbar>

<c-bs-navbar expand="lg" c-container="False" c-attrs="{'class': 'bg-body-tertiary'}">
  <c-bs-navbar-brand href="#">Navbar</c-bs-navbar-brand>
</c-bs-navbar>