How to create a subnav in ember.js

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: {
  this.resource("about", function() {


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) {

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.

Great answer: javascript - How to create a subnav in ember.js - Stack Overflow

Exactly what I was looking for.