配置带二级菜单的Blazor Navbar导航栏

核心实现思路 #

通过Blazor的组件状态管理控制二级菜单的显示/隐藏，点击"Locations"时切换状态，同时阻止默认页面跳转行为，确保无刷新交互。

修改步骤及完整代码 #

1. 添加状态变量与核心逻辑

在代码块中新增布尔变量控制菜单显示，同时添加点击切换方法，根据当前URL自动展开菜单的逻辑：

@implements IDisposable

@inject NavigationManager NavigationManager

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">WeatherStation</a>
    </div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>

        <!-- 修改为按钮触发菜单切换，阻止默认跳转 -->
        <div class="nav-item px-3">
            <button class="nav-link dropdown w-100 text-start" @onclick="ToggleLocationsMenu">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Locations
            </button>
        </div>

        <!-- 用条件渲染控制二级菜单显示 -->
        @if (isLocationsMenuOpen)
        {
            <div class="nav-item px-5">
                <NavLink class="nav-link" href="Locations/Location A">
                    <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Location A
                </NavLink>
            </div>

            <div class="nav-item px-5">
                <NavLink class="nav-link" href="Locations/Location B">
                    <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Location B
                </NavLink>
            </div>
        }
    </nav>
</div>

@code {
    private string? currentUrl;
    private bool isLocationsMenuOpen;

    protected override void OnInitialized()
    {
        currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
        // 初始化时根据URL判断是否展开菜单
        isLocationsMenuOpen = currentUrl.StartsWith("Locations", StringComparison.OrdinalIgnoreCase);
        NavigationManager.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        currentUrl = NavigationManager.ToBaseRelativePath(e.Location);
        // 页面跳转后根据URL自动调整菜单状态
        isLocationsMenuOpen = currentUrl.StartsWith("Locations", StringComparison.OrdinalIgnoreCase);
        StateHasChanged();
    }

    // 切换二级菜单显示状态
    private void ToggleLocationsMenu()
    {
        isLocationsMenuOpen = !isLocationsMenuOpen;
    }

    public void Dispose()
    {
        NavigationManager.LocationChanged -= OnLocationChanged;
    }
}

关键说明 #

• 用button替代原NavLink作为父菜单触发点，避免默认跳转行为，实现无刷新切换。
• 通过布尔变量isLocationsMenuOpen控制二级菜单的渲染，符合Blazor组件状态管理逻辑。
• 新增的URL判断逻辑可提升体验：进入Locations子页面时自动展开父菜单，离开时自动收起。

内容的提问来源于stack exchange，提问作者deputy-chief-hardy