Simple breadcrumb Ember 2 component.

component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '', // Does not let Ember inject HTML into the component.
  routing: Ember.inject.service('-routing'),
  breadcrumbs: Ember.computed('routing.currentRouteName', function () {
    let routeName = this.get('routing.currentRouteName');

    let routeNames = routeName.split('.');
    let len = routeNames.length;
    let last = routeNames[len - 1];
    if (last === 'index' && len > 1) {
      routeNames.pop();
      len--;
    }

    let routes = [];
    let container = Ember.getOwner(this);
    let name = '';
    for (let i = 0; i < len; i++) {
      // if name is not empty then it means we are dealing with a nested route. So
      // we need to lookup the entire name.
      if (name != '') {
        name += '.' + routeNames[i];
      } else {
        name = routeNames[i];
      }

      let route = container.lookup(`route:${name}`);
      if (!route || !route.label) {
        console.warn(`hooklift-breadcrumb: route label for "${name}" pod was not found. Skipping.`);
        continue;
      }

      routes.push({ name: name, label: route.label });
    }

    return routes;
  }),
});

example-pod-route.js

import Ember from 'ember';

export default Ember.Route.extend({
  label: 'Metrics',
  title: Ember.computed('label', function () {
    return `Hooklift | ${this.get('label')}`;
  }),
});

example-template.hbs

<div class="header-bar-item crumbs">
  {{#each breadcrumbs as |route|}}
    {{#link-to route.name class='crumbs-item'}}{{route.label}}{{/link-to}}
  {{/each}}
</div>