Component to generate bootstrap navs

Usage

Use in combination with the Components.NavItem component:

 {{#bs-nav type="pills"}}
   {{#bs-nav-item}}
      {{#link-to "foo"}}Foo{{/link-to}}
   {{/bs-nav-item}}
   {{#bs-nav-item}}
     {{#link-to "bar"}}Bar{{/link-to}}
   {{/bs-nav-item}}
 {{/bs-nav}}

Nav styles

The component supports the default bootstrap nav styling options "pills" and "tabs" through the type property, as well as the justified and stacked properties.

Active items

Bootstrap expects to have the active class on the <li> element that should be the active (highlighted) navigation item. To achieve that just use the link-to helper as usual. If the link is active, i.e it points to the current route, the bs-nav-item component will detect that and apply the active class automatically. The same applies for the disabled state.

Dropdowns

Use the Components.Dropdown component with a tagName of "li" to integrate a dropdown into your nav:

 {{#bs-nav type="pills"}}
   {{#bs-nav-item}}{{#link-to "index"}}Home{{/link-to}}{{/bs-nav-item}}
   {{#bs-dropdown tagName="li"}}
     {{#bs-dropdown-toggle}}Dropdown <span class="caret"></span>{{/bs-dropdown-toggle}}
     {{#bs-dropdown-menu}}
       <li>{{#link-to "foo"}}Foo{{/link-to}}</li>
       <li>{{#link-to "bar"}}Bar{{/link-to}}</li>
     {{/bs-dropdown-menu}}
   {{/bs-dropdown}}
 {{/bs-nav}}