diff --git a/docs/src/app/pages/component-sidenav/component-nav.html b/docs/src/app/pages/component-nav/component-nav.html
similarity index 100%
rename from docs/src/app/pages/component-sidenav/component-nav.html
rename to docs/src/app/pages/component-nav/component-nav.html
diff --git a/docs/src/app/pages/component-nav/component-nav.ts b/docs/src/app/pages/component-nav/component-nav.ts
new file mode 100644
index 000000000000..d467bf6a342a
--- /dev/null
+++ b/docs/src/app/pages/component-nav/component-nav.ts
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Component, inject} from '@angular/core';
+import {AsyncPipe} from '@angular/common';
+import {MatListItem, MatNavList} from '@angular/material/list';
+import {ActivatedRoute, RouterLinkActive, RouterLink} from '@angular/router';
+import {of} from 'rxjs';
+import {switchMap} from 'rxjs/operators';
+
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+
+@Component({
+  selector: 'app-component-nav',
+  templateUrl: './component-nav.html',
+  imports: [MatNavList, MatListItem, RouterLinkActive, RouterLink, AsyncPipe],
+})
+export class ComponentNav {
+  private _docItems = inject(DocumentationItems);
+  private _route = inject(ActivatedRoute);
+  protected _params = this._route.params;
+
+  items = this._params.pipe(
+    switchMap(params => (params?.section ? this._docItems.getItems(params.section) : of([]))),
+  );
+}
diff --git a/docs/src/app/pages/component-sidenav/component-sidenav.ts b/docs/src/app/pages/component-sidenav/component-sidenav.ts
index 7ae42ab87d93..f71e4dd6ce95 100644
--- a/docs/src/app/pages/component-sidenav/component-sidenav.ts
+++ b/docs/src/app/pages/component-sidenav/component-sidenav.ts
@@ -17,11 +17,10 @@ import {
 } from '@angular/core';
 import {BreakpointObserver} from '@angular/cdk/layout';
 import {AsyncPipe} from '@angular/common';
-import {MatListItem, MatNavList} from '@angular/material/list';
 import {MatSidenav, MatSidenavContainer} from '@angular/material/sidenav';
-import {ActivatedRoute, Routes, RouterOutlet, RouterLinkActive, RouterLink} from '@angular/router';
-import {Observable, of, Subscription} from 'rxjs';
-import {map, switchMap} from 'rxjs/operators';
+import {Routes, RouterOutlet} from '@angular/router';
+import {Observable, Subscription} from 'rxjs';
+import {map} from 'rxjs/operators';
 
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {Footer} from '../../shared/footer/footer';
@@ -37,6 +36,7 @@ import {
   ComponentViewer,
 } from '../component-viewer/component-viewer';
 import {ComponentStyling} from '../component-viewer/component-styling';
+import {ComponentNav} from '../component-nav/component-nav';
 
 // These constants are used by the ComponentSidenav for orchestrating the MatSidenav in a responsive
 // way. This includes hiding the sidenav, defaulting it to open, changing the mode from over to
@@ -105,21 +105,6 @@ export class ComponentSidenav implements OnInit, OnDestroy {
   }
 }
 
-@Component({
-  selector: 'app-component-nav',
-  templateUrl: './component-nav.html',
-  imports: [MatNavList, MatListItem, RouterLinkActive, RouterLink, AsyncPipe],
-})
-export class ComponentNav {
-  private _docItems = inject(DocumentationItems);
-  private _route = inject(ActivatedRoute);
-  protected _params = this._route.params;
-
-  items = this._params.pipe(
-    switchMap(params => (params?.section ? this._docItems.getItems(params.section) : of([]))),
-  );
-}
-
 export const componentSidenavRoutes: Routes = [
   {
     path: '',