diff --git a/projects/core/custom-elements.json b/projects/core/custom-elements.json
index 6ae0532fb..d437c280d 100644
--- a/projects/core/custom-elements.json
+++ b/projects/core/custom-elements.json
@@ -42268,7 +42268,11 @@
             },
             {
               "kind": "method",
-              "name": "addStartEventListener"
+              "name": "onStartItemSlotChange"
+            },
+            {
+              "kind": "method",
+              "name": "onItemSlotChange"
             },
             {
               "kind": "method",
diff --git a/projects/core/src/navigation/navigation.element.spec.ts b/projects/core/src/navigation/navigation.element.spec.ts
index 29619b7de..b68d24277 100644
--- a/projects/core/src/navigation/navigation.element.spec.ts
+++ b/projects/core/src/navigation/navigation.element.spec.ts
@@ -125,6 +125,12 @@ describe('cds-navigation', () => {
       itemRefs.forEach(item => {
         expect(item.expanded).toBe(component.expanded);
       });
+
+      component.expanded = true;
+      await componentIsStable(component);
+      itemRefs.forEach(item => {
+        expect(item.expanded).toBe(component.expanded);
+      });
     });
 
     it('to navigationStartRefs', async () => {
@@ -133,12 +139,22 @@ describe('cds-navigation', () => {
       startRefs.forEach(start => {
         expect(start.expandedRoot).toBe(component.expandedRoot);
       });
+
+      component.expanded = true;
+      await componentIsStable(component);
+      startRefs.forEach(start => {
+        expect(start.expandedRoot).toBe(component.expandedRoot);
+      });
     });
 
     it('to rootNavigationStart', async () => {
       await componentIsStable(component);
       const rootStart = component.querySelector<CdsNavigationStart>(':scope > cds-navigation-start');
       expect(rootStart.expanded).toBe(component.expanded);
+
+      component.expanded = true;
+      await componentIsStable(component);
+      expect(rootStart.expanded).toBe(component.expanded);
     });
 
     it('to rootNavigationItems', async () => {
@@ -147,6 +163,28 @@ describe('cds-navigation', () => {
       rootItems.forEach(item => {
         expect(item.expanded).toBe(component.expanded);
       });
+
+      component.expanded = true;
+      await componentIsStable(component);
+      rootItems.forEach(item => {
+        expect(item.expanded).toBe(component.expanded);
+      });
+    });
+
+    it('to new navigation items', async () => {
+      component.expanded = true;
+      await componentIsStable(component);
+
+      const navItem = document.createElement('cds-navigation-item');
+      navItem.id = 'my-new-nav-item';
+      navItem.innerHTML = '<a href="#">My New Nav Item</a>';
+
+      component.appendChild(navItem);
+
+      await componentIsStable(component);
+
+      expect(navItem.expanded).toBe(component.expanded);
+      expect(navItem.tabIndex).toBe(-1);
     });
   });
 });
diff --git a/projects/core/src/navigation/navigation.element.ts b/projects/core/src/navigation/navigation.element.ts
index 662eef631..17673eabe 100644
--- a/projects/core/src/navigation/navigation.element.ts
+++ b/projects/core/src/navigation/navigation.element.ts
@@ -182,7 +182,7 @@ export class CdsNavigation extends LitElement implements Animatable {
     return this.navigationEnd
       ? html`
           <div class="navigation-end" cds-layout="vertical align:horizontal-stretch">
-            <slot name="cds-navigation-end"></slot>
+            <slot name="cds-navigation-end" @slotchange=${this.onItemSlotChange}></slot>
           </div>
         `
       : '';
@@ -194,7 +194,7 @@ export class CdsNavigation extends LitElement implements Animatable {
     this.rootNavigationStart
       ? (returnHTML = html`
           <div class="navigation-start" cds-layout="vertical align:horizontal-stretch">
-            <slot @slotchange="${() => this.addStartEventListener()}" name="navigation-start"></slot>
+            <slot @slotchange="${() => this.onStartItemSlotChange()}" name="navigation-start"></slot>
             <cds-divider class="start-divider"></cds-divider>
           </div>
         `)
@@ -210,7 +210,7 @@ export class CdsNavigation extends LitElement implements Animatable {
       <nav class="navigation-body-wrapper">
         <div .ariaActiveDescendant=${this.ariaActiveDescendant} tabindex="0" id="item-container">
           <div class="navigation-body" cds-layout="vertical wrap:none align:horizontal-stretch">
-            <slot></slot>
+            <slot @slotchange=${this.onItemSlotChange}></slot>
           </div>
         </div>
       </nav>
@@ -235,10 +235,6 @@ export class CdsNavigation extends LitElement implements Animatable {
 
   firstUpdated(props: PropertyValues) {
     super.firstUpdated(props);
-    // set all visible navigation elements to tabindex = -1
-    this.allNavigationElements.forEach(item => {
-      setAttributes(item, ['tabindex', '-1']);
-    });
 
     const itemWrapper = this.shadowRoot?.querySelector('#item-container');
     itemWrapper?.addEventListener('focus', this.initItemKeys.bind(this));
@@ -256,7 +252,9 @@ export class CdsNavigation extends LitElement implements Animatable {
     this.updateChildrenProps();
   }
 
-  addStartEventListener() {
+  onStartItemSlotChange() {
+    this.onItemSlotChange();
+
     // This is controlled by the slotchange event on the navigation-start slot
     // Make sure we reattach the click handler for toggle if consumer changes the start element (e.g *ngIf)
     if (this.rootNavigationStart) {
@@ -264,6 +262,15 @@ export class CdsNavigation extends LitElement implements Animatable {
     }
   }
 
+  onItemSlotChange() {
+    this.updateChildrenProps();
+
+    // set all visible navigation elements to tabindex = -1
+    this.allNavigationElements.forEach(item => {
+      setAttributes(item, ['tabindex', '-1']);
+    });
+  }
+
   updateChildrenProps() {
     if (this.navigationGroupItems) {
       syncPropsForAllItems(Array.from(this.navigationGroupItems), this, { groupItem: true });