emberjs - how to mark active menu item using router infrastructure

Question

I\'m trying to create navigation tabs (taken from Twitter Bootstrap):

Answer 1

Like other people said, using {{#link-to}} to link to an existing route, when that route is current URL, {{#link-to}} will automatically add active to its CSS classes.

See Ember issue 4387

Answer 2

Beginning with v0.8.0 ember-bootstrap supports navs, including handling the active state correctly. And that without any link-to/tagName kind of hacks:

{{#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}}

See http://kaliber5.github.io/ember-bootstrap/api/classes/Components.Nav.html

Answer 3

Ember 1.11+:

{{#link-to "dashboard" tagName="li"}}
  <a href="{{view.href}}">Dashboard</a>
{{/link-to}}

Ember < 1.11 (bind-attr required):

{{#link-to "dashboard" tagName="li"}}
  <a {{bind-attr href="view.href"}}>Dashboard</a>
{{/link-to}}

Answer 4

I know this is old post, but here are updates for Ember 2.4.0

For creating links you can write

{{#link-to 'photoGallery'}}
  Great Hamster Photos
{{/link-to}}

or

{{link-to 'Great Hamster Photos' 'photoGallery'}}

Ember will automatically set class to active when current route matches link's route (in this example photoGallery).

If you want to control 'active' class on other routes as well, you can do it by setting current-when attribute.

{{#link-to 'photoGallery' current-when='photoGallery photoPreview'}}
  Great Hamster Photos
{{/link-to}}

This link will have active class on both photoGallery and photoPreview routes.

https://github.com/emberjs/ember.js/blob/v2.4.0/packages/ember-routing-views/lib/components/link-to.js#L140

Answer 5

I see this question is quite old, but if you upgraded Ember.js to the RC3 you can use tagName property, like:

{{#link-to messages tagName="li"}}Messages{{/link-to}}

Here is the API - http://emberjs.com/api/classes/Ember.LinkView.html

Answer 6

Handlebars

<ul class="nav">
    <li>{{#linkTo "index"}}Index{{/linkTo}}</li>
    <li>{{#linkTo "about"}}About{{/linkTo}}</li>
</ul>

Javascript

App.Router.map(function() {
    this.route("about");
});

It will add active class automatically based on route. Note: It is tested using ember-1.0.0-pre.4.js