# Bootstrap, active links and LIs **URL:** \ **Category:** Uncategorized\ **Created:** [April 24, 2014, 2:01am UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018 "2014-04-24T02:01:13Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\ **Post date:** [April 24, 2014, 2:01am UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/1 "2014-04-24T02:01:13Z")
If you’ve ever tried to use twitter bootstrap with Ember, you’ll have hit this problem. The “active” class for links in bootstrap that are in a list of links needs to be on the `li` element, not on the link: ```auto
  • Link
    • ``` Up until now the solution to achieve this in ember has been a little ugly IMO: ```auto {{#link-to 'dashboard' tagName="li" href=false}} {{#link-to 'dashboard' bubbles=false}} Dashboard {{/link-to}} {{/link-to}} ``` I decided to see if I could come up with something nicer using a component, and I think I did: ```auto {{#link-li}} {{#link-to 'dashboard'}} Dashboard {{/link-to}} {{/link-li}} ``` The component is implemented like this - no template necessary: ```auto App.LinkLiComponent = Em.Component.extend({ tagName: 'li', classNameBindings: ['active'], active: function() { return this.get('childViews').anyBy('active'); }.property('childViews.@each.active') }); ``` Another win for components, which I am currently enjoying abusing in various ways 😄 ---
    **Author:** ![tristanpendergr](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tristanpendergr/32/5409_2.png) [@tristanpendergr](https://discuss.emberjs.com/u/tristanpendergr)\ **Post date:** [April 24, 2014, 2:46am UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/2 "2014-04-24T02:46:34Z")
    Good stuff. Is the Ember.Handlebars.helper call at the end necessary? I thought components automatically registered a helper. ---
    **Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\ **Post date:** [April 24, 2014, 2:58am UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/3 "2014-04-24T02:58:29Z")
    I believe it is necessary if you don’t provide a template, although that may have changed recently ---
    **Author:** ![domchristie](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/domchristie/32/9490_2.png) [@domchristie](https://discuss.emberjs.com/u/domchristie)\ **Post date:** [April 24, 2014, 7:24am UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/4 "2014-04-24T07:24:25Z")
    Nice work. An almost identical solution to @mixonic’s [http://emberjs.jsbin.com/iFEvATE/2/edit](http://emberjs.jsbin.com/iFEvATE/2/edit), which adds a `currentWhen` property so that the behaviour can be customised (e.g. to apply an `active` class to a parent route link). However I was scratching my head trying to get it to work with query params, so this looks ideal for that. ---
    **Author:** ![pangratz](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/pangratz/32/14210_2.png) [@pangratz](https://discuss.emberjs.com/u/pangratz)\ **Post date:** [April 24, 2014, 8:39am UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/5 "2014-04-24T08:39:25Z")
    Another approach by @rwjblue: [https://github.com/rjackson/Ghost/commit/3a912bd89e6bd5270c9d919456bdb9c13622e2b5](https://github.com/rjackson/Ghost/commit/3a912bd89e6bd5270c9d919456bdb9c13622e2b5) ---
    **Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\ **Post date:** [April 24, 2014, 1:03pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/6 "2014-04-24T13:03:01Z")
    > [@domchristie](#): > > Nice work. An almost identical solution to @mixonic’s [JS Bin - Collaborative JavaScript Debugging](http://emberjs.jsbin.com/iFEvATE/2/edit), which adds a currentWhen property so that the behaviour can be customised (e.g. to apply an active class to a parent route link). Note that with my approach, you can specify `currentWhen` on the actual link-to and it will work as expected - in @mixonic’s approach you _have to_ specify `currentWhen` on the wrapper for it to work. `@rwjblue`’s solution is less verbose but seems more inflexible - it wouldn’t handle linking to a route with dynamic segments without alteration at the moment. Interesting to see all the approaches to this - I hadn’t seen either of those before and probably wouldn’t have attempted this if I had! ---
    **Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\ **Post date:** [April 24, 2014, 1:10pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/7 "2014-04-24T13:10:54Z")
    > [@tristanpendergr](#): > > Good stuff. Is the Ember.Handlebars.helper call at the end necessary? I thought components automatically registered a helper. It does seem to have changed - it works fine without registering it ---
    **Author:** ![muchweb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/muchweb/32/13437_2.png) [@muchweb](https://discuss.emberjs.com/u/muchweb)\ **Post date:** [April 24, 2014, 2:15pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/8 "2014-04-24T14:15:57Z")
    > [@alexspeller](#): > > It does seem to have changed - it works fine without registering it I can confirm this. Great finding, just used it in one of my projects. @alexspeller, is it alright if I add it to [Ember Components](http://ember-components.com/) website? ---
    **Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\ **Post date:** [April 24, 2014, 3:50pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/9 "2014-04-24T15:50:30Z")
    P[quote=“muchweb, post:8, topic:5018”]@alexspeller, is it alright if I add it to Ember Components website? [/quote] Please do, that’s fine by me! ---
    **Author:** ![muchweb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/muchweb/32/13437_2.png) [@muchweb](https://discuss.emberjs.com/u/muchweb)\ **Post date:** [April 24, 2014, 4:07pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/10 "2014-04-24T16:07:18Z")
    Added a [pull request](https://github.com/intuitivepixel/ember-components/pull/5). 😄 ---
    **Author:** ![jvenator](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jvenator/32/4035_2.png) [@jvenator](https://discuss.emberjs.com/u/jvenator)\ **Post date:** [November 14, 2014, 11:43pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/11 "2014-11-14T23:43:00Z")
    @alexspeller a lot has changed since this solution was originally posted. Is this still a valid approach? I’m a bit of a noob, and not exactly sure how to implement this. Where do I drop this component in my project (using ember-cli 0.1.2)? Thanks ---
    **Author:** ![startup](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@startup](https://discuss.emberjs.com/u/startup)\ **Post date:** [December 2, 2014, 9:20pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/12 "2014-12-02T21:20:02Z")
    bump. I’m encountering the same issue. Working + code that will last more than a few months would be ideal. Anybody? ---
    **Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\ **Post date:** [December 3, 2014, 3:21pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/13 "2014-12-03T15:21:34Z")
    What issue are you experiencing exactly? ---
    **Author:** ![ohcibi](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ohcibi/32/9352_2.png) [@ohcibi](https://discuss.emberjs.com/u/ohcibi)\ **Post date:** [February 20, 2015, 6:34pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/14 "2015-02-20T18:34:16Z")
    `app/components/link-li.js` ---
    **Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\ **Post date:** [March 18, 2015, 8:36pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/15 "2015-03-18T20:36:20Z")
    This is now an ember-cli addon: [https://github.com/alexspeller/ember-cli-active-link-wrapper](https://github.com/alexspeller/ember-cli-active-link-wrapper) ---
    **Author:** ![splattne](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/splattne/32/3694_2.png) [@splattne](https://discuss.emberjs.com/u/splattne)\ **Post date:** [May 14, 2015, 11:18am UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/16 "2015-05-14T11:18:32Z")
    In in Ember 1.13 beta 1, which was published today, the active-link-wrapper doesn’t work anymore. I don’t know if it’s because of something in 1.13, but there are no childViews anymore [https://github.com/alexspeller/ember-cli-active-link-wrapper/blob/master/addon/components/active-link.js](https://github.com/alexspeller/ember-cli-active-link-wrapper/blob/master/addon/components/active-link.js) In ``` return this.get('childViews').anyBy('active'); ``` The length of `this.get('childViews')` is always 0. ---
    **Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\ **Post date:** [May 27, 2015, 11:03pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/17 "2015-05-27T23:03:30Z")
    [https://github.com/alexspeller/ember-cli-active-link-wrapper/issues/4](https://github.com/alexspeller/ember-cli-active-link-wrapper/issues/4) ---
    **Author:** ![zoltan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/zoltan/32/16699_2.png) [@zoltan](https://discuss.emberjs.com/u/zoltan)\ **Post date:** [May 28, 2015, 10:55am UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/18 "2015-05-28T10:55:13Z")
    This works for me quite well: ``` {{#link-to 'index' tagName="li"}}Home{{/link-to}} {{#link-to 'about' tagName="li"}}About{{/link-to}} ``` Unfortunately need that empty `href`. ---
    **Author:** ![Stanislav](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@Stanislav](https://discuss.emberjs.com/u/Stanislav)\ **Post date:** [June 13, 2015, 12:01pm UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/19 "2015-06-13T12:01:33Z")
    It is my solution ``` Ember.LinkView.reopen({ activeParent: false, isActive: false, addIsActiveObserver: function () { if (this.get('activeParent')) { this.addObserver('isActive', this, 'activeObserver'); this.activeObserver(); } }.on('didInsertElement'), activeObserver: function () { if (this.get('isActive')) { this.$().parent().addClass('active'); } else { this.$().parent().removeClass('active'); } }, active: Ember.computed('resolvedParams', 'routeArgs', function () { var isActive = this._super(); Ember.set(this, 'isActive', !!isActive); return isActive; }) }); ``` And in template ``` ``` Work in v1.11 ---
    **Author:** ![zoltan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/zoltan/32/16699_2.png) [@zoltan](https://discuss.emberjs.com/u/zoltan)\ **Post date:** [October 23, 2015, 9:08am UTC](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018/20 "2015-10-23T09:08:51Z")
    > Update: I just extracted in a simple add-on (Ember.js 2.1 or greater): [ember-bootstrap-nav-link - npm](https://www.npmjs.com/package/ember-bootstrap-nav-link) ```auto ember install ember-bootstrap-nav-link ``` Using components: - Generate a component with ```auto ember g component nav-link-to ``` - Update the `js` file and `hbs` file as below. ```auto // nav-link-to.js import Ember from 'ember'; export default Ember.LinkComponent.extend({ tagName: 'li', hrefForA: Ember.computed('models', 'qualifiedRouteName', function computeLinkToComponentHref() { let qualifiedRouteName = this.get('qualifiedRouteName'); let models = this.get('models'); if (this.get('loading')) { return this.get('loadingHref'); } let routing = this.get('_routing'); let queryParams = this.get('queryParams.values'); return routing.generateURL(qualifiedRouteName, models, queryParams); }) }); // nav-link-to.hbs {{yield}} ``` - You can use it in your template. ```auto ``` [Next page](https://discuss.emberjs.com/t/bootstrap-active-links-and-lis/5018.md?page=2)