BlazorStrap Navbar doesn't open

I'm using the BlazorStrap Navbar. When the width of the display is decreased the toggle button is shown. Problem is that clicking it now doesn't open the menu.

I have created a Blazor Server app with

dotnet new blazor -o BlazorIndNone  -au Individual  -int Server
dotnet add package blazorstrap
dotnet add package blazorstrap.V5

program.cs:

using BlazorStrap;
builder.Services.AddBlazorStrap(options =>
{
    options.ShowDebugMessages = true;
});

app.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />

    <link rel="stylesheet" href="BlazorApp3.styles.css" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/BlazorStrap/popper.min.js"></script>
    <script src="_content/BlazorStrap/blazorstrap.js"></script>
</body>
</html>

The nav.razor from https://blazorstrap.io/V5/V5/components/navbar

<BSNavbar Color="BSColor.Light">
    <BSContainer Container="Container.Fluid">
        <BSNavbarBrand>Navbar</BSNavbarBrand>
        <BSCollapse IsInNavbar="true">
            <Toggler>
                <BSNavbarToggle />
            </Toggler>
            <Content>
                <BSNav MarginEnd="Margins.Auto" MarginBottom="Margins.Small" Class="mb-lg-0">
                    <BSNavItem IsActive="true" Url="javascript:void(0);">Home</BSNavItem>
                    <BSNavItem Url="javascript:void(0);">Link</BSNavItem>
                    <BSNavItem IsDropdown="true">
                        <BSDropdown IsNavPopper="true" Placement="Placement.BottomEnd">
                            <Toggler><BSToggle IsNavLink="true">Dropdown</BSToggle></Toggler>
                            <Content>
                                <BSDropdownItem Url="javascript:void(0);">Action</BSDropdownItem>
                                <BSDropdownItem Url="javascript:void(0);">Another action</BSDropdownItem>
                                <BSDropdownItem IsDivider="true" />
                                <BSDropdownItem Url="javascript:void(0);">Something else here</BSDropdownItem>
                            </Content>
                        </BSDropdown>
                    </BSNavItem>
                    <BSNavItem Url="javascript:void(0);" IsDisabled="true">Disabled</BSNavItem>
                </BSNav>
            </Content>
        </BSCollapse>
        <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <BSButton Color="BSColor.Success" IsOutlined="true">Search</BSButton>
        </form>
    </BSContainer>
</BSNavbar>

Solution

It is because this Navbar need interactive rendermode to work. You will need to change the nav.razor to

@rendermode InteractiveServer
<BSNavbar Color="BSColor.Light">
...

Or you could use global interactive mode in App.razor

    <HeadOutlet @rendermode="InteractiveServer" />
...
    <Routes @rendermode="InteractiveServer" />

If you check the original built-in template navibar you could find it using pure javascript for Toggle function which can work in SSR.

onclick="document.querySelector('.navbar-toggler').click()"

But this bootstrap navbar doesn't use pure javascript so need interactive mode to be active.