diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel
index bd517ee8ef0d..b97f3052b532 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel
@@ -25,5 +25,6 @@ ng_project(
         "//:node_modules/@angular/material",
         "//:node_modules/rxjs",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source",
+        "//devtools/projects/ng-devtools/src/lib/shared/utils",
     ],
 )
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss
index 2167fee3c2f1..55ba5f5b4c52 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss
@@ -13,6 +13,8 @@
     border: none;
     cursor: pointer;
     color: var(--tertiary-contrast);
+    display: flex;
+    align-items: center;
 
     &.hidden {
       visibility: hidden;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts
index bb258e32fa75..033ee01375e3 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts
@@ -7,18 +7,24 @@
  */
 
 import {
+  afterNextRender,
+  afterRenderEffect,
   Component,
   computed,
-  effect,
+  DestroyRef,
   ElementRef,
   input,
   output,
   signal,
+  untracked,
   viewChild,
 } from '@angular/core';
+import {MatIcon} from '@angular/material/icon';
 
 import {FlatNode} from '../component-data-source';
-import {MatIcon} from '@angular/material/icon';
+import {Debouncer} from '../../../../shared/utils/debouncer';
+
+const RESIZE_DEBOUNCE = 100;
 
 @Component({
   selector: 'ng-breadcrumbs',
@@ -57,11 +63,30 @@ export class BreadcrumbsComponent {
     | undefined
   >(undefined);
 
-  constructor() {
-    effect((cleanup) => {
-      const observer = new ResizeObserver(() => this.updateScrollButtonVisibility());
+  constructor(destroyRef: DestroyRef) {
+    const debouncer = new Debouncer();
+    const observer = new ResizeObserver(
+      debouncer.debounce(() => {
+        this.updateScrollButtonVisibility();
+      }, RESIZE_DEBOUNCE),
+    );
+
+    afterNextRender(() => {
       observer.observe(this.breadcrumbsScrollContent().nativeElement);
-      cleanup(() => observer.disconnect());
+    });
+
+    afterRenderEffect({
+      read: () => {
+        // We use the parents as a dependency to trigger a layout
+        // update that would show the navigation buttons.
+        this.parents();
+        untracked(() => this.updateScrollButtonVisibility());
+      },
+    });
+
+    destroyRef.onDestroy(() => {
+      debouncer.cancel();
+      observer.disconnect();
     });
   }