inializers.navigation.js

import NavigationService from 'admin/services/navigation';

export default {
  name: 'navigation',
  initialize(container, app) {
    var navigation = NavigationService.create({
      links: [
        { name: 'Posts', link: 'posts'},
        { name: 'Settings', link: 'settings'},
      ],

      rightLinks: [
        { name: 'Options', children: [
          { name: 'More Settings', link: 'settings.more' },
        ]}
      ]
    });

    app.register('navigation:main', navigation, { instantiate: false });
    app.inject('controller', 'navigation', 'navigation:main');
  }
};

navigation.hbs

<div class="nav-content">
  <div class="nav-left">
    <ul class="nav nav-links">
      {{#each navigation.links as |nav|}}
        {{#if nav.children}}
          <li class="nav-link">
            <a role="button" aria-expanded="false" class="dropdown-toggle">
              {{nav.name}}
              <span class="caret">
              </span>
            </a>
            <ul role="menu" class="nav-nested">
              {{#each nav.children as |child|}}
                {{#link-to child.link tagName="li" class="nav-link"}}
                  {{#link-to child.link class="header-top-link"}}
                    {{child.name}}
                  {{/link-to}}
                {{/link-to}}
              {{/each}}
            </ul>
          </li>
        {{else}}
          {{#link-to nav.link tagName="li" class="nav-link"}}
            {{#link-to nav.link class="header-top-link"}}
              {{nav.name}}
            {{/link-to}}
          {{/link-to}}
        {{/if}}
      {{/each}}
    </ul>
  </div>
  <div class="nav-right">
    <ul class="nav nav-links">
      {{#each navigation.rightLinks as |nav|}}
        {{#if nav.children}}
          <li class="nav-link">
            <a role="button" aria-expanded="false" class="dropdown-toggle">
              {{nav.name}}
              <span class="caret">
              </span>
            </a>
            <ul role="menu" class="nav-nested">
              {{#each nav.children as |child|}}
                {{#link-to child.link tagName="li" class="nav-link"}}
                  {{#link-to child.link class="header-top-link"}}
                    {{child.name}}
                  {{/link-to}}
                {{/link-to}}
              {{/each}}
            </ul>
          </li>
        {{else}}
          {{#link-to nav.link tagName="li" class="nav-link"}}
            {{#link-to nav.link class="header-top-link"}}
              {{nav.name}}
            {{/link-to}}
          {{/link-to}}
        {{/if}}
      {{/each}}
      <li class="nav-link">
        <span class="h-seperate">
        </span>
        <a href="#" class="header-top-link" {{action "logOut"}}>
          Log Out
        </a>
      </li>
    </ul>
  </div>
</div>

services.navigation.js

import Ember from 'ember';

export default Ember.Service.extend({
  links: [],
  rightLinks: [],

  setLinks(links) {
    this.links = links;
  },

  setRightLinks(links) {
    this.rightLinks = links;
  }
});