Components.Nav public

Component to generate bootstrap navs


Use in combination with the yielded components

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

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: {{ "bar" this.model}}Bar{{/}}

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.


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.linkTo @route="index">
  <nav.dropdown as |dd|>
    <dd.toggle>Dropdown <span class="caret"></span></dd.toggle>
    < as |ddm|>
      <ddm.item><ddm.linkTo @route="foo">Foo</ddm.linkTo></ddm.item>
      <ddm.item><ddm.linkTo @route="bar">Bar</ddm.linkTo></ddm.item>

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.

dropdownComponent {String} private

fill boolean public

Make the nav flex fill (BS4 only), see bootstrap docs

itemComponent {String} private

justified boolean public

Make the nav justified, see bootstrap docs

linkToComponent {String} private

stacked boolean public

Make the nav pills stacked, see bootstrap docs

type String public

Special type of nav, either "pills" or "tabs"