Components.Navbar public

Component to generate Bootstrap navbars.

Usage

Uses the following components by a contextual reference:

<BsNavbar as |navbar|>
  <div class="navbar-header">
    <navbar.toggle />
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <navbar.content>
    <navbar.nav as |nav|>
      <nav.item>
        <nav.linkTo @route="home">Home</nav.linkTo>
      </nav.item>
      <nav.item>
        <nav.linkTo @route="navbars">Navbars</nav.linkTo>
      </nav.item>
    </navbar.nav>
  </navbar.content>
</BsNavbar>

Note: the <div class="navbar-header"> is required for BS3 to hold the elements visible on a mobile breakpoint, when the actual content is collapsed. It should not be used for BS4!

The component yields references to the following contextual components:

• Components.NavbarContent
• Components.NavbarToggle
• Components.NavbarNav

Furthermore, references to the following actions are yielded:

• collapse: triggers the onCollapse action and collapses the navbar (mobile)
• expand: triggers the onExpand action and expands the navbar (mobile)
• toggleNavbar: triggers the toggleNavbar action and toggles the navbar (mobile)

Responsive Design

For the mobile breakpoint the Bootstrap styles will hide the navbar content ({{navbar.content}}). Clicking on the navbar toggle button ({{navbar.toggle}}) will expand the menu. By default, all nav links (<nav.linkTo @route="...">) are already wired up to call the navbar's collapse action, so clicking any of them will collapse the navbar. To selectively prevent that, you can set its collapseNavbar property to false:

<nav.item>
  <nav.linkTo @route="index" @collapseNavbar={{false}}>Don't collapse</nav.linkTo>
</nav.item>

To collapse the navbar when clicking on some nav items that are not internal links, you can use the yielded collapse action:

<BsNavbar as |navbar|>
  <navbar.content>
    <navbar.nav as |nav|>
      <nav.item>
        <a onclick={{action navbar.collapse}}>Collapse</a>
      </nav.item>
    </navbar.nav>
  </navbar.content>
</BsNavbar>

Navbar styles

The component supports the default bootstrap navbar styling options through the type property. Bootstrap navbars do not currently support justified nav links, so those are explicitly disallowed.

Other bootstrap navbar variations, such as forms, buttons, etc. can be supported through direct use of bootstrap styles applied through the class attribute on the components.

Bootstrap 3/4 Notes

Bootstrap 4 changed the default navbar styling option from navbar-default to navbar-light. If you explicitly specified "default" in Bootstrap 3 and are migrating, you will need to change this in your code. Bootstrap 4 changes navbar-inverse to navbar-dark.

Bootstrap 4 navbars are fluid by default without the need for an additional container. An additional container is added like with Bootstrap 3 if fluid is false.

Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.