Emberjs : Global menu is not included in every page

I'm trying to make a global menu with emberjs. Following these instructions, I have written a controller/navigation.js and a views/navigation.hbs which render a fixed menu defined in the controller.

I then render the navigation template in application.hbs like so:

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        {{render 'navigation'}}
    </div>
</nav>

When I load up the application at the root url, the menu is rendered as it should. However, as soon as I navigate elsewhere (by clicking an element of the menu, for instance), the menu is not rendered anymore, and if I navigate back to the home page later, the navigation menu is not rendered again.

Why isn't this template rendered every time application.hbs is rendered? What steps should I follow to make sure this menu is rendered with the application?

If it is possible, the navigation menu should have its own controller and template, in order to avoid having all that code in the application controller and template.