diff --git a/ui/app/components/app-breadcrumbs.js b/ui/app/components/app-breadcrumbs.js
new file mode 100644
index 000000000..28a08a85d
--- /dev/null
+++ b/ui/app/components/app-breadcrumbs.js
@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { reads } from '@ember/object/computed';
+
+export default Component.extend({
+  breadcrumbsService: service('breadcrumbs'),
+
+  tagName: '',
+
+  breadcrumbs: reads('breadcrumbsService.breadcrumbs'),
+});
diff --git a/ui/app/services/breadcrumbs.js b/ui/app/services/breadcrumbs.js
new file mode 100644
index 000000000..0998417a3
--- /dev/null
+++ b/ui/app/services/breadcrumbs.js
@@ -0,0 +1,37 @@
+import { getOwner } from '@ember/application';
+import Service, { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
+
+export default Service.extend({
+  router: service(),
+
+  breadcrumbs: computed('router.currentRouteName', function() {
+    const owner = getOwner(this);
+    const allRoutes = this.get('router.currentRouteName')
+      .split('.')
+      .map((segment, index, allSegments) => allSegments.slice(0, index + 1).join('.'));
+
+    let crumbs = [];
+    allRoutes.forEach(routeName => {
+      const route = owner.lookup(`route:${routeName}`);
+
+      // Routes can reset the breadcrumb trail to start anew even
+      // if the route is deeply nested.
+      if (route.get('resetBreadcrumbs')) {
+        crumbs = [];
+      }
+
+      // Breadcrumbs are either an array of static crumbs
+      // or a function that returns breadcrumbs given the current
+      // model for the route's controller.
+      let breadcrumbs = route.get('breadcrumbs') || [];
+      if (typeof breadcrumbs === 'function') {
+        breadcrumbs = breadcrumbs(route.get('controller.model'));
+      }
+
+      crumbs.push(...breadcrumbs);
+    });
+
+    return crumbs;
+  }),
+});
diff --git a/ui/app/templates/components/app-breadcrumbs.hbs b/ui/app/templates/components/app-breadcrumbs.hbs
new file mode 100644
index 000000000..8fae9ecf3
--- /dev/null
+++ b/ui/app/templates/components/app-breadcrumbs.hbs
@@ -0,0 +1,9 @@
+{{#each breadcrumbs as |breadcrumb index|}}
+  <li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
+    {{#link-to
+      params=breadcrumb.args
+      data-test-breadcrumb=breadcrumb.args.firstObject}}
+      {{breadcrumb.label}}
+    {{/link-to}}
+  </li>
+{{/each}}