diff --git a/ui/app/components/breadcrumbs.hbs b/ui/app/components/breadcrumbs.hbs
new file mode 100644
index 000000000..7e807bd1e
--- /dev/null
+++ b/ui/app/components/breadcrumbs.hbs
@@ -0,0 +1 @@
+{{yield this.crumbs}}
\ No newline at end of file
diff --git a/ui/app/components/breadcrumbs.js b/ui/app/components/breadcrumbs.js
new file mode 100644
index 000000000..3d104ab91
--- /dev/null
+++ b/ui/app/components/breadcrumbs.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class Breadcrumbs extends Component {
+  @service bucket;
+
+  get crumbs() {
+    return this.bucket.crumbs;
+  }
+}
diff --git a/ui/app/services/bucket.js b/ui/app/services/bucket.js
new file mode 100644
index 000000000..0a268708f
--- /dev/null
+++ b/ui/app/services/bucket.js
@@ -0,0 +1,21 @@
+import Service from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { schedule } from '@ember/runloop';
+
+export default class BucketService extends Service {
+  @tracked crumbs = [];
+
+  @action registerBreadcrumb(crumb) {
+    schedule('actions', this, () => {
+      console.log('register crumb:  ', crumb);
+      this.crumbs = [...this.crumbs, crumb];
+    });
+  }
+
+  @action deregisterBreadcrumb(crumb) {
+    const newCrumbs = this.crumbs.filter(c => c !== crumb);
+
+    this.crumbs = newCrumbs;
+  }
+}