# How to create a subnav in ember.js

**URL:** <https://discuss.emberjs.com/t/how-to-create-a-subnav-in-ember-js/2334>\
**Category:** Uncategorized\
**Created:** [August 29, 2013, 6:01pm UTC](https://discuss.emberjs.com/t/how-to-create-a-subnav-in-ember-js/2334 "2013-08-29T18:01:48Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jtrinker](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jtrinker/32/14715_2.png) [@jtrinker](https://discuss.emberjs.com/u/jtrinker)\
**Post date:** [August 29, 2013, 6:01pm UTC](https://discuss.emberjs.com/t/how-to-create-a-subnav-in-ember-js/2334/1 "2013-08-29T18:01:49Z")

</div>

This issue has been stumping me for days. I need a subnav to display under the main nav in the application template when a user visits the ‘about’ page. I feel like I must be missing some vital concept because I keep reading that if something is extremely hard to do in Ember than you’re probably doing it wrong. And I feel like Ember should be able to handle a simple subnav with ease.

I would like the subnav to display on the skinny white horizontal bar below the main nav when “ABOUT” is clicked.

I can’t put the subnav in the about template since the nav code is in the application template.

My Router:

```
App.Router.map(function() {
  this.resource("about", function() {
    this.route("philosophy");
    this.route("leadership");
    this.route("staff");
    this.route("affiliations");
  });

  this.route("conditions");
  this.route("programs");
  this.route("testimonials");
});

```

I can’t render a partial inside the application template because I only want it displayed when someone is at the /about url.

I’ve tried plain old jQuery show and hide with this:

```
App.ApplicationController = Ember.ObjectController.extend({
  currentRouteChanged: function() {
    if(this.get('currentRouteName').indexOf('about') > -1) {
      $("ul").removeClass("sub-nav-list-hide");
      $("ul").addClass("sub-nav-list-show");
    }
  }.observes('currentRouteName')
});

```

And it works when you click about, but when you hit the back button or navigate to another page the subnav doesn’t hide.

I’m stuck and I feel like I’m making this way too difficult.

---

<div class="post-metadata">

**Author:** ![jtrinker](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jtrinker/32/14715_2.png) [@jtrinker](https://discuss.emberjs.com/u/jtrinker)\
**Post date:** [August 29, 2013, 8:12pm UTC](https://discuss.emberjs.com/t/how-to-create-a-subnav-in-ember-js/2334/2 "2013-08-29T20:12:59Z")

</div>

Great answer: [javascript - How to create a subnav in ember.js - Stack Overflow](http://stackoverflow.com/questions/18518011/how-to-create-a-subnav-in-ember-js)

Exactly what I was looking for.