Ember CLI component - Bootstrap 3 navigation link with proper active state management
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app
blueprints/nav-link-to
config
tests
vendor
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package-lock.json
package.json
testem.js

README.md

Ember-bootstrap-nav-link

Build Status

  • Insert Bootstrap 3 compatible link in navigation bars.
  • Compatible with Ember 2.1 or greater.
  • data-toggle and data-target attribute binding. (@fdlane)

Manage active state properly in bootstrap navigation bar.

Collapse navbar when nav-link clicked.

Installation

ember install ember-bootstrap-nav-link

Usage

Simple navbar:

<ul class="nav navbar-nav">
  {{#nav-link-to 'index'}}Home{{/nav-link-to}}
  {{#nav-link-to 'about'}}About{{/nav-link-to}}
  {{#nav-link-to 'contact'}}Contact{{/nav-link-to}}
</ul>

Collapsable navbar with data-toggle and data-target:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#main-nav-bar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      {{#link-to 'index' class="navbar-brand"}}Map-touch{{/link-to}}
    </div>

    <div class="collapse navbar-collapse" id="main-nav-bar">
      <ul class="nav navbar-nav">
        {{#nav-link-to 'index' data-toggle='collapse' data-target='#main-nav-bar.in'}}Home{{/nav-link-to}}
        {{#nav-link-to 'map' data-toggle='collapse' data-target='#main-nav-bar.in'}}Map{{/nav-link-to}}
        </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Note: Don't forget the .in selector in data-target in the component line, because we would like to close the menu only when it is open. If you miss the .in, the menu in desktop mode would try to collapse which would cause a strange flickering.

Contributing

Installation

  • git clone <repository-url>
  • cd my-addon
  • npm install

Linting

  • npm run lint:js
  • npm run lint:js -- --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • npm test – Runs ember try:each to test your addon against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit https://ember-cli.com/.

Learn more about this plugin in Ember.js tutorial

License

This project is licensed under the MIT License.

Ember | Ember.js | Tutorial