diff --git a/adev/src/app/core/layout/navigation/navigation.component.html b/adev/src/app/core/layout/navigation/navigation.component.html
index a51fab35c30..d38a0b0ae8a 100644
--- a/adev/src/app/core/layout/navigation/navigation.component.html
+++ b/adev/src/app/core/layout/navigation/navigation.component.html
@@ -62,9 +62,9 @@
   <nav
     class="adev-nav-primary docs-scroll-hide"
     [class.adev-nav-primary--open]="isMobileNavigationOpened()"
-    [class.adev-nav-primary--rc]="currentDocsVersionMode === 'rc'"
-    [class.adev-nav-primary--next]="currentDocsVersionMode === 'next'"
-    [class.adev-nav-primary--deprecated]="currentDocsVersionMode === 'deprecated'"
+    [class.adev-nav-primary--rc]="currentDocsVersionMode() === 'rc'"
+    [class.adev-nav-primary--next]="currentDocsVersionMode() === 'next'"
+    [class.adev-nav-primary--deprecated]="currentDocsVersionMode() === 'deprecated'"
   >
     <button
       type="button"
diff --git a/adev/src/app/core/layout/navigation/navigation.component.spec.ts b/adev/src/app/core/layout/navigation/navigation.component.spec.ts
index 8c3d876ea44..7b9361a81c8 100644
--- a/adev/src/app/core/layout/navigation/navigation.component.spec.ts
+++ b/adev/src/app/core/layout/navigation/navigation.component.spec.ts
@@ -30,6 +30,7 @@ describe('Navigation', () => {
 
   const fakeVersionManager = {
     currentDocsVersion: signal('v17'),
+    currentDocsVersionMode: signal('stable'),
     versions: signal<Version[]>([]),
   };
 
diff --git a/adev/src/app/core/layout/navigation/navigation.component.ts b/adev/src/app/core/layout/navigation/navigation.component.ts
index 40bd5da6916..2cf4ffe8691 100644
--- a/adev/src/app/core/layout/navigation/navigation.component.ts
+++ b/adev/src/app/core/layout/navigation/navigation.component.ts
@@ -78,12 +78,12 @@ export class Navigation {
   readonly APPLE_SEARCH_LABEL = `⌘`;
   readonly DEFAULT_SEARCH_LABEL = `ctrl`;
 
-  activeRouteItem = this.navigationState.primaryActiveRouteItem;
-  protected theme = this.themeManager.theme;
-  protected openedMenu = signal<MenuType | null>(null);
+  readonly activeRouteItem = this.navigationState.primaryActiveRouteItem;
+  protected readonly theme = this.themeManager.theme;
+  protected readonly openedMenu = signal<MenuType | null>(null);
 
-  protected currentDocsVersion = this.versionManager.currentDocsVersion;
-  protected currentDocsVersionMode = this.versionManager.currentDocsVersionMode;
+  protected readonly currentDocsVersion = this.versionManager.currentDocsVersion;
+  protected readonly currentDocsVersionMode = this.versionManager.currentDocsVersionMode;
 
   // Set the values of the search label and title only on the client, because the label is user-agent specific.
   protected searchLabel = this.isBrowser
diff --git a/adev/src/app/core/services/version-manager.service.ts b/adev/src/app/core/services/version-manager.service.ts
index 29664fa2977..fede9f915d6 100644
--- a/adev/src/app/core/services/version-manager.service.ts
+++ b/adev/src/app/core/services/version-manager.service.ts
@@ -36,14 +36,14 @@ type VersionJson = {version: string; url: string};
 export class VersionManager {
   private document = inject(DOCUMENT);
 
-  get currentDocsVersionMode(): VersionMode {
+  readonly currentDocsVersionMode = computed<VersionMode>(() => {
     const hostname = this.document.location.hostname;
     if (hostname.startsWith('v')) return 'deprecated';
     if (hostname.startsWith('rc')) return 'rc';
     if (hostname.startsWith('next')) return 'next';
 
     return 'stable';
-  }
+  });
 
   private localVersions = (versionJson as VersionJson[]).map((v) => {
     return {