CODEWITHSUNDEEP
ember.js
Kallan
Kallan

Reputation: 183

emberjs : add active css class to link based on current route

I am using Ember version 1.8 . Does anyone know how to automatically highlight menu link when user is in that route. Plese help. I saw few Stack overflow posts on doing it. but they looks old and is not working for me

I have the following menu in handlebars template

    <ul class="nav navbar-nav">
                <li>
                {{#link-to 'posts'}}Posts{{/link-to}}
                </li>
                <li>
                {{#link-to 'comments'}}Comments{{/link-to}}
                </li>
            </ul>

router.js looks like

   this.resource('post', { path: 'posts/:post_id'},function(){
            this.resource('comments', { path: '/comments' });

    });

Upvotes: 1

Views: 1301

Answers (1)

Kalman
Kalman

Reputation: 8121

Ember automatically adds a class of active to a routed currently being visited. You can define what that should look like in css, for example:

.active {
  background: yellow;
}

The rest just works...

See a working demo here

Upvotes: 1

Related Questions