diff --git a/ui/admin/app/components/breadcrumbs/container/index.hbs b/ui/admin/app/components/breadcrumbs/container/index.hbs
index be19e415f..f1aa4332e 100644
--- a/ui/admin/app/components/breadcrumbs/container/index.hbs
+++ b/ui/admin/app/components/breadcrumbs/container/index.hbs
@@ -6,7 +6,7 @@
 <Hds::Breadcrumb
   ...attributes
   data-test-breadcrumbs-container
-  {{did-insert this.registerContainer}}
+  {{this.insertedBreadcrumbContainer}}
 >
   {{yield}}
 </Hds::Breadcrumb>
\ No newline at end of file
diff --git a/ui/admin/app/components/breadcrumbs/container/index.js b/ui/admin/app/components/breadcrumbs/container/index.js
index f763d2717..f61614026 100644
--- a/ui/admin/app/components/breadcrumbs/container/index.js
+++ b/ui/admin/app/components/breadcrumbs/container/index.js
@@ -5,7 +5,7 @@
 
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
 
 /*
   The `containers` property from the `breadcrumbsService` is tracked
@@ -18,8 +18,7 @@ export default class BreadcrumbsContainerComponent extends Component {
 
   container = null;
 
-  @action
-  registerContainer(element) {
+  insertedBreadcrumbContainer = modifier((element) => {
     // A child `ol` is rendered in the Hds::Breadcrumb container and this is
     // the element that the in-element helper should drop breadcrumbs into.
     this.container = {
@@ -27,11 +26,7 @@ export default class BreadcrumbsContainerComponent extends Component {
     };
 
     this.breadcrumbsService.registerContainer(this.container);
-  }
 
-  willDestroy() {
-    super.willDestroy(...arguments);
-
-    this.breadcrumbsService.unregisterContainer(this.container);
-  }
+    return () => this.breadcrumbsService.unregisterContainer(this.container);
+  });
 }
diff --git a/ui/admin/app/components/breadcrumbs/item/index.hbs b/ui/admin/app/components/breadcrumbs/item/index.hbs
index 1da65afd5..725ae21e1 100644
--- a/ui/admin/app/components/breadcrumbs/item/index.hbs
+++ b/ui/admin/app/components/breadcrumbs/item/index.hbs
@@ -14,7 +14,7 @@
       @model={{@model}}
       @current={{this.current}}
       ...attributes
-      {{did-insert this.registerSelf}}
+      {{this.insertedBreadcrumbItem}}
       data-test-breadcrumbs-item
     />
   {{/in-element}}
diff --git a/ui/admin/app/components/breadcrumbs/item/index.js b/ui/admin/app/components/breadcrumbs/item/index.js
index e80ef5945..e215e4cab 100644
--- a/ui/admin/app/components/breadcrumbs/item/index.js
+++ b/ui/admin/app/components/breadcrumbs/item/index.js
@@ -5,8 +5,8 @@
 
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
 
 /*
   `BreadcrumbsItem` inserts the crumbs to an existing container.
@@ -18,10 +18,9 @@ export default class BreadcrumbsItemComponent extends Component {
 
   @tracked element = null;
 
-  @action
-  registerSelf(element) {
+  insertedBreadcrumbItem = modifier((element) => {
     this.element = element;
-  }
+  });
 
   get current() {
     const crumbs = this.breadcrumbsService.containers[0].element.children;