NavMenu toggler doesn't work in Blazor Web App

[danroth27]

The NavMenu in the Blazor Web App template has a toggler that uses onclick handlers, but these interactive features don't work because the NavMenu isn't interactive.

Repro steps:

• Create a new Blazor Web App
• Narrow the browser windows so that the hamburger menu button shows up
• Click on the button

Expected result: The nav menu toggles so it is visible
Actual result: The nav menu isn't shown

[danroth27]

This is one of a general class of issues where you want to have interactive elements as part of the app's layout.

[BieleckiLtd]

Even with interactivity selected during the project creation, hamburger still does not work.

[marinasundstrom]

The question is how the template should deal with this in a way that it is intuitive to developers.

And then perhaps the docs should give some guidance in how to handle the transition from SSR to a fully interactive site, and the other way around.

I would also suggest modernizing the template by switching to an offcanvas menu instead.

Offcanvas Navbar

Component markup and script for offcanvas navbar.

Demo: https://blazor8app.graypebble-0c46426e.westus2.azurecontainerapps.io/

<header class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
  <nav class="container px-4 px-md-3 flex-wrap flex-md-nowrap" aria-label="Main navigation">
    <a class="navbar-brand" href="#">BlazorApp</a>
    <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                Home
            </NavLink>        
        </li>
        <li class="nav-item">
            <NavLink class="nav-link" href="counter">
                Counter
            </NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link" href="showdata">
                Show data
            </NavLink>
        </li>
      </ul>
      <hr class="d-md-none text-white-50">
      <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
        <LoginDisplay />
        <LightSwitch />
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2" href="https://github.com/dotnet/aspnetcore" target="_blank" rel="noopener">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" style="margin-top: 2px;" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path></svg>
            <small class="d-md-none ms-2">GitHub</small>
          </a>
        </li>
      </ul>
    </div>
  </nav>
</header>

This is the JavaScript based on Bootstrap Offcanvas example. Put it in app.js.

const offCanvasCollapse = document.querySelector('.offcanvas-collapse');

// Toggle off canvas when clicking the menu toggle
document.querySelector('#navbarSideCollapse').addEventListener('click', () => {
    offCanvasCollapse.classList.toggle('open');
});

[sikora507]

I was surprised to discover this myself after I started experimenting with new blazor template. Here's the solution to enable interactivity, if someone like me, stumbles upon this issue. Taken from https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-preview-5/#enable-interactivity-for-individual-components-with-blazor-server
Call AddServerCompoments() in your Probram.cs:

builder.Services.AddRazorComponents().AddServerComponents();

Add RenderModeServer attribute to NavMenu.razor

@attribute [RenderModeServer]

This will make the hamburger menu to work:

[danroth27]

The downside of making the hamburger menu interactive is that it's part of the layout, so then every page in the app will have an interactive component, so then why not just make the entire app interactive? 🤔