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:

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.

collapse

private

expand

private

_collapsed unknown private

backgroundColor String public

Default: 'light'

Defined in addon/components/bs-navbar.js:291

Bootstrap 4 Only: Sets the background color for the navbar. Can be any color in the set that composes the bg-* classes and can be extended by creating your own bg-* classes.

collapsed boolean public

Default: true

Defined in addon/components/bs-navbar.js:111

Manages the state for the responsive menu between the toggle and the content.

contentComponent {String} private

fluid boolean public

Default: true

Defined in addon/components/bs-navbar.js:129

Controls whether the wrapping div is a fluid container or not.

linkToComponent {String} private

navComponent {String} private

position String public

Default: null

Defined in addon/components/bs-navbar.js:140

Specifies the position classes for the navbar, currently supporting none, "fixed-top", "fixed-bottom", and either "static-top" (BS3) or "sticky-top" (BS4). See the bootstrap docs for details.

toggleBreakpoint String public

Default: 'lg'

Defined in addon/components/bs-navbar.js:278

Bootstrap 4 Only: Defines the responsive toggle breakpoint size. Options are the standard two character Bootstrap size abbreviations. Used to set the navbar-expand-* class. Set to null to disable collapsing.

toggleComponent {String} private

type String public

Default: 'default'

Defined in addon/components/bs-navbar.js:168

Property for type styling

For the available types see the Bootstrap docs

onCollapse

public

The action to be sent when the navbar is about to be collapsed.

You can return false to prevent collapsing the navbar automatically, and do that in your action by setting collapsed to true.

onCollapsed

public

The action to be sent after the navbar has been collapsed (including the CSS transition).

onExpand

public

The action to be sent when the navbar is about to be expanded.

You can return false to prevent expanding the navbar automatically, and do that in your action by setting collapsed to false.

onExpanded

public

The action to be sent after the navbar has been expanded (including the CSS transition).

Classes