Fix overflowing Bootstrap 4 horizontal Navbar content in ASP.NET Blazor app

I have overflowing content in my Blazor Server app 4 Navbar that I have positioned horizontally at the top of the page.

A search reveals I have the following four options for resolving this:

1. Reduce the number or width of navbar items.
2. Hide certain navbar items at certain screen sizes using responsive utility classes.
3. Change the point at which the navbar switches between collapsed and horizontal mode by using a media query.
4. Use the Priority+ Navigation Pattern at CSS-Tricks

Option 2 would do but I cannot find out how implement it. Option 4 has some helpful implementation examples but these rely on JavaScript.

Because I'm using Blazor I want to use C# and not JavaScript. Can anyone help me find a pattern or code for either option 2 or 4, but prefereably a Blazor implementation of option 4 the Priority+ Navigation Pattern. I particularly like the demo CSS-Tricks calls the “Greedy Navigaton” example if anyone can Tell me how to Blazorize that.

To demonstrate the problem I have attached below some files that can replace the files of the same name that are generated using the VS 2019 Blazor Template.

Any comment most appreciated.

MainLayout.razor

  @inherits LayoutComponentBase
    <div class="toprow">
        <NavMenu />
    </div>
    <div class="main">
        <div class="content px-4">
            @Body
        </div>
    </div>

NavMenu.razor

    <nav class="navbar navbar-expand-md bg-dark navbar-dark ">
    <!-- Brand -->
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">

        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link " href="/Index">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Long link Description One</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">Long link Description Two</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">Long link Description Three</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">Long link Description Four</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">Long link Description Five</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">Long link Description Six</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">Long link Description Seven</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">Long link Description Eight</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">Long link Description Nine</a>
            </li>

        </ul>
    </div>

</nav>

    @code {
        private bool collapseNavMenu = true;

        private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

        private void ToggleNavMenu()
        {
            collapseNavMenu = !collapseNavMenu;
        }
    }

Index.razor

@page "/"