Navbar

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

This page shows some example usage of the <BsNavbar> component. For the full documentation please refer to the API Docs. You might also want to consult the official Bootstrap Docs for general information.
light
light

<BsNavbar
  @type="light"
  @backgroundColor="light"
  @collapsed={{true}}
  @onCollapse={{action (mut collapsed) true}}
  @onExpand={{action (mut collapsed) false}} as |navbar|>
  <div class="navbar-header">
    {{navbar.toggle}}
    {{#link-to "index" class="navbar-brand"}}Brand{{/link-to}}
  </div>
  <navbar.content>
    <navbar.nav as |nav|>
      <nav.item>
        <nav.link-to @route="index">Home</nav.link-to>
      </nav.item>
      <nav.item>
        <nav.link-to @route="demo.navbars">Navbars</nav.link-to>
      </nav.item>
      <nav.dropdown as |dd|>
        <dd.toggle>Dropdown <span class="caret"></span></dd.toggle>
        <dd.menu as |ddm|>
          <ddm.item>
            <ddm.link-to @route="index">Home</ddm.link-to>
          </ddm.item>
          <ddm.item>
            <ddm.link-to @route="demo.navbars">Navbars</ddm.link-to>
          </ddm.item>
        </dd.menu>
      </nav.dropdown>
    </navbar.nav>
  </navbar.content>
</BsNavbar>