如何在MODx中配置Wayfinder实现Bootstrap 5下拉菜单

目标参考结构（Bootstrap 5 标准下拉菜单） #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

完整 Wayfinder 调用代码 #

在页面或模板中使用以下调用，参数已适配 Bootstrap 5 结构：

[[Wayfinder?
  &startId=`0`
  &level=`2`
  &outerTpl=`@CODE:<ul class="navbar-nav">[[+output]]</ul>`
  &rowTpl=`bs5_nav_item`
  &innerTpl=`bs5_dropdown_menu`
  &innerRowTpl=`bs5_dropdown_item`
  &hereClass=`active`
]]

需创建的 Chunk 模板 #

在 MODx 后台「元素 > 模板元素 > Chunk」中创建以下三个 Chunk：

1. Chunk 名称：bs5_nav_item（一级菜单项模板）

用于渲染一级菜单，自动识别是否包含子菜单并添加 Bootstrap 下拉类：

<li class="nav-item[[+haschildren:notempty=` dropdown`]]">
  <a class="nav-link[[+haschildren:notempty=` dropdown-toggle`]] [[+here:notempty=` active`]]" 
     href="[[+link]]" 
     [[+haschildren:notempty=` role="button" data-bs-toggle="dropdown" aria-expanded="false"`]]>
    [[+menutitle]]
  </a>
  [[+children]]
</li>

2. Chunk 名称：bs5_dropdown_menu（子菜单外层容器）

对应 Bootstrap 的下拉菜单容器：

<ul class="dropdown-menu">
  [[+output]]
</ul>

3. Chunk 名称：bs5_dropdown_item（子菜单单项模板）

渲染子菜单的每个选项：

<li>
  <a class="dropdown-item[[+here:notempty=` active`]]" href="[[+link]]">
    [[+menutitle]]
  </a>
  [[+children:notempty=`[[+children]]`]]
</li>

关键注意事项 #

• 确保页面已引入 Bootstrap 5 的 CSS 和 JS 文件（必须包含下拉组件的 JS，或直接引入完整 Bootstrap JS）
• &level 参数设为 2 表示最多展示两级菜单，如需更深层级可调整数字
• &startId 设为 0 表示从网站根节点开始生成菜单，可根据需求修改为指定父页面 ID
• Wayfinder 的输出需嵌套在 Bootstrap 的 collapse navbar-collapse 容器内，才能配合响应式折叠按钮正常工作

内容的提问来源于stack exchange，提问作者Christian Türling