breadcrumb.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 () {
    console.log('--> current route: %s', this.get('routing.currentRouteName'));
    Ember.getOwner(this).lookup('route:' + this.get('routing.currentRouteName')).label;
    this.get('routing.router');
  }),
});

breadcrumbs.hbs

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

metrics-route.js

import Ember from 'ember';

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