Blazor下拉菜单展开时无法推动其他元素的解决方法

问题分析 #

1. Bootstrap默认的.dropdown-menu采用position:absolute，脱离文档流，展开时不会占据空间，因此无法推动下方导航项。
2. 原代码中NavLink嵌套<a>标签的结构无效，会导致NavLink的激活状态（active类）无法正确识别当前页面。

解决方案 #

1. 添加自定义CSS修正下拉菜单布局 #

在项目的CSS文件中添加以下样式，让下拉菜单不脱离文档流：

/* 自定义下拉菜单样式，使其占据文档流空间 */
.dropdown-menu.expandable {
    position: static;
    float: none;
    border: none;
    box-shadow: none;
    margin-top: 0.5rem;
    padding-left: 1rem;
}

2. 修改导航代码结构 #

替换原下拉菜单部分的代码，用Blazor绑定控制展开状态，同时修正NavLink的结构：

<div class="container-fluid">
    <a class="navbar-brand" href=""><img src="/img/Boxplosive-logo.png" class="logoimg" /></a>
    <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="index">
                <span class="oi oi-home" aria-hidden="true"></span> Dashboard
            </NavLink>
        </div>
        <!-- 修改后的下拉菜单 -->
        <div class="nav-item px-3 dropdown">
            <button class="nav-link dropdown-toggle w-100 text-start" 
                    @onclick="() => expandSubNav = !expandSubNav" 
                    aria-expanded="@expandSubNav">
                <span class="oi oi-home" aria-hidden="true"></span> Create
            </button>
            <ul class="dropdown-menu @(expandSubNav ? "d-block expandable" : "d-none")">
                <li><NavLink class="dropdown-item" href="promotion">Promotion</NavLink></li>
                <li><NavLink class="dropdown-item" href="loyalty">Loyalty</NavLink></li>
                <li><NavLink class="dropdown-item" href="news-article">News Article</NavLink></li>
            </ul>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="publish">
                <span class="oi oi-cloud-upload" aria-hidden="true"></span> Publish
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="analyse">
                <span class="oi oi-graph" aria-hidden="true"></span> Analyse
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="managment">
                <span class="oi oi-cog" aria-hidden="true"></span> Managment
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="configuration">
                <span class="oi oi-list" aria-hidden="true"></span> Configuration
            </NavLink>
        </div>
    </nav>
    <nav class="sidebar-footer">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-person" aria-hidden="true"></span> Admin
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="help">
                <span class="oi oi-question-mark" aria-hidden="true"></span> Help
            </NavLink>
            <button class="logoutbtn">Logout</button>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;
    private bool expandSubNav;

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

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
        // 收起侧边栏时同步收起下拉菜单
        if (collapseNavMenu)
        {
            expandSubNav = false;
        }
    }
}

关键修改说明 #

• 下拉菜单布局：通过自定义expandable类将下拉菜单改为position:static，使其占据文档流空间，展开时自动推动下方元素下移。
• NavLink结构：将NavLink直接作为.dropdown-item的元素，不再嵌套<a>标签，确保NavLink能正确识别当前页面并添加active类。
• 展开状态控制：用Blazor的expandSubNav变量绑定下拉菜单的显示/隐藏，替代Bootstrap的data-bs-toggle，实现更可控的交互逻辑。

内容的提问来源于stack exchange，提问作者Navisa Sabeti