Components.Nav public

Component to generate bootstrap navs

Usage

Use in combination with the yielded components

• Components.NavItem
• nav.dropdown

<BsNav @type="pills" as |nav|>
  <nav.item>
    <nav.linkTo @route="foo">
      Foo
    </nav.linkTo>
  </nav.item>
  <nav.item>
    <nav.linkTo @route="bar" @model={{this.model}}>
      Bar
    </nav.linkTo>
  </nav.item>
</BsNav>

Note: the use of angle brackets <nav.linkTo> as shown above is only supported for Ember >= 3.10, as it relies on Ember's native implementation of the LinkComponent. For older Ember versions please use the legacy syntax with positional arguments: {{#nav.link-to "bar" this.model}}Bar{{/nav.link-to}}

Nav styles

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

Active items

Bootstrap 3 expects to have the active class on the <li> element that should be the active (highlighted) navigation item. To achieve that use the @route and optionally @model (or @models) and @query properties of the yielded nav.linkTo component just as you would for Ember's <LinkTo> component to create a link with proper active class support.

Dropdowns

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

<BsNav @type="pills" as |nav|>
  <nav.item>
    <nav.linkTo @route="index">
      Home
    </nav.linkTo>
  </nav.item>
  <nav.dropdown as |dd|>
    <dd.toggle>Dropdown <span class="caret"></span></dd.toggle>
    <dd.menu as |ddm|>
      <ddm.item><ddm.linkTo @route="foo">Foo</ddm.linkTo></ddm.item>
      <ddm.item><ddm.linkTo @route="bar">Bar</ddm.linkTo></ddm.item>
    </dd.menu>
  </nav.dropdown>
</BsNav>

Bootstrap 3/4 Notes

Use nav.linkTo for in-app links to ensure proper styling regardless of Bootstrap version. Explicit use of <a> tags in Bootstrap 4 must apply the nav-link class and manage the active state explicitly.

The fill styling is only available with Bootstrap 4

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.