diff --git a/libs/components/src/navigation/nav-group.component.html b/libs/components/src/navigation/nav-group.component.html
index 00382d8636..ca9a7c3aec 100644
--- a/libs/components/src/navigation/nav-group.component.html
+++ b/libs/components/src/navigation/nav-group.component.html
@@ -29,10 +29,10 @@
   </ng-template>
 
   <!-- Show toggle to the left for trees otherwise to the right -->
-  <ng-container slot-start *ngIf="variant === 'tree'">
+  <ng-container slot="start" *ngIf="variant === 'tree'">
     <ng-container *ngTemplateOutlet="button"></ng-container>
   </ng-container>
-  <ng-container slot-end *ngIf="variant !== 'tree'">
+  <ng-container slot="end" *ngIf="variant !== 'tree'">
     <ng-container *ngTemplateOutlet="button"></ng-container>
   </ng-container>
 </bit-nav-item>
diff --git a/libs/components/src/navigation/nav-item.component.html b/libs/components/src/navigation/nav-item.component.html
index 29706c7933..32c8dfbf98 100644
--- a/libs/components/src/navigation/nav-item.component.html
+++ b/libs/components/src/navigation/nav-item.component.html
@@ -16,7 +16,7 @@
       #slotStart
       class="[&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:!tw-text-alt2"
     >
-      <ng-content select="[slot-start]"></ng-content>
+      <ng-content select="[slot=start]"></ng-content>
     </div>
     <!-- Default content for #slotStart (for consistent sizing) -->
     <div
@@ -75,7 +75,7 @@
     <div
       class="tw-flex tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:!tw-text-alt2"
     >
-      <ng-content select="[slot-end]"></ng-content>
+      <ng-content select="[slot=end]"></ng-content>
     </div>
   </div>
 </div>
diff --git a/libs/components/src/navigation/nav-item.stories.ts b/libs/components/src/navigation/nav-item.stories.ts
index 47960f874f..7fdbadce31 100644
--- a/libs/components/src/navigation/nav-item.stories.ts
+++ b/libs/components/src/navigation/nav-item.stories.ts
@@ -61,7 +61,7 @@ export const WithChildButtons: Story = {
     template: `
       <bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection">
         <button
-          slot-start
+          slot="start"
           class="tw-ml-auto"
           [bitIconButton]="'bwi-clone'"
           [buttonType]="'contrast'"
@@ -69,7 +69,7 @@ export const WithChildButtons: Story = {
           aria-label="option 1"
         ></button>
         <button
-          slot-end
+          slot="end"
           class="tw-ml-auto"
           [bitIconButton]="'bwi-pencil-square'"
           [buttonType]="'contrast'"
@@ -77,7 +77,7 @@ export const WithChildButtons: Story = {
           aria-label="option 2"
         ></button>
         <button
-          slot-end
+          slot="end"
           class="tw-ml-auto"
           [bitIconButton]="'bwi-check'"
           [buttonType]="'contrast'"