diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/NavMenu.razor b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/NavMenu.razor
index 00fbe2af24d7..f6475e36b646 100644
--- a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/NavMenu.razor
+++ b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/NavMenu.razor
@@ -4,6 +4,8 @@
 @inject NavigationManager NavigationManager
 
 ##endif*@
+<script type="module" src="@Assets["Components/Layout/NavMenu.razor.js"]"></script>
+
 <div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
         <a class="navbar-brand" href="">BlazorWebCSharp.1</a>
@@ -12,7 +14,7 @@
 
 <input type="checkbox" title="Navigation menu" class="navbar-toggler" />
 
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+<div id="nav-scrollable" class="nav-scrollable">
     <nav class="nav flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/NavMenu.razor.js b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/NavMenu.razor.js
new file mode 100644
index 000000000000..6efc9a015880
--- /dev/null
+++ b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/NavMenu.razor.js
@@ -0,0 +1,9 @@
+// Handle navigation menu toggle
+const navScrollable = document.getElementById("nav-scrollable");
+const navToggler = document.querySelector(".navbar-toggler");
+
+if (navScrollable && navToggler) {
+    navScrollable.addEventListener("click", function() {
+        navToggler.click();
+    });
+}
\ No newline at end of file