🆕 Bricks 2.4 已发布：查询循环性能提升 40%，迁移教程同步更新 →
BricksWiki

首页 / 中文教程 / 教程

Bricks 菜单构建器与 Mega Menu 指南——Nav (Nestable) 全解

教程：Bricks 1.8+ 菜单构建器五件套（Nav nestable / Text link / Dropdown / Toggle / Offcanvas）的完整用法。桌面菜单、移动端菜单、一键 Mega Menu、多级下拉、WordPress 菜单混用，一篇讲清。

Ray ChanRay Chan·2026-08-18·约 3 分钟
目录
  1. 1.菜单构建器五件套
  2. 2.默认菜单结构
  3. 3.桌面菜单：顶级项与下拉样式
  4. 4.移动端菜单：断点与汉堡按钮
  5. 5.Mega Menu：一键开启
  6. 6.多级下拉与 Multilevel 模式
  7. 7.WordPress 菜单与 Nav menu 元素
  8. 8.Offcanvas 独立移动菜单
  9. 9.非全屏移动菜单与样式技巧
  10. 10.小结

Bricks 1.8 引入了一套全新的菜单构建器：完全响应式、可访问、高度可定制，用来做网站导航。整套系统由 5 个新元素组成，可以随意混搭，桌面菜单和移动端菜单都能设计。本文按官方文档拆解这套系统，从默认结构到 Mega Menu 一步到位。

菜单构建器五件套

元素 作用
Nav (nestable) 同时承载桌面和移动端菜单的嵌套元素，菜单里可以放任何 Bricks 元素
Text link 轻量导航文本链接（可带图标），比把 Basic Text 变链接好用
Dropdown (nestable) 可嵌套的无障碍子菜单，支持 hover/click/两者触发，一键变 Mega Menu
Toggle 无障碍「汉堡」按钮，用来开关移动菜单和 Offcanvas，还能切换任意元素的任意 HTML 属性
Offcanvas (nestable) 抽屉式面板，可以做和桌面菜单内容完全不同的独立移动菜单

默认菜单结构

把 Nav (Nestable) 拖到画布，默认自带：2 个 Nav links、1 个 Dropdown、2 个 Toggle 元素（一个开移动菜单、一个关移动菜单）。

几个关键点：

  • Nav items Block 是特殊元素，不能单独删除——它装所有顶级菜单项，同时是移动菜单的容器；
  • Dropdown 里的 Content Div 同理，装全部下拉内容；
  • 所有顶级菜单项自动包 li 标签（无障碍），Nav items 用 ul 标签，Dropdown 结构相同；
  • 作为嵌套元素，菜单里可以加任何 Bricks 元素，不再受老式「扁平」Nav menu 限制。

桌面菜单：顶级项与下拉样式

顶级项样式在 Top Level (Item) 设置组：Gap（项间距）、Padding、背景色、边框、排版、变换、过渡。

激活状态用 [aria-current="page"] 和 .brx-submenu-toggle.aria-current 选择器控制背景、边框和排版——当前页高亮是导航刚需。

下拉（Dropdown）分三块：

  • Text：下拉文字的内边距（.brx-submenu-toggle span）
  • Icon：图标内边距/间距/位置（左右，用 flex-direction）/尺寸/颜色/变换/过渡
  • Content：下拉面板（.brx-dropdown-content）的最小宽度、背景、边框、阴影、排版、变换（含 Open 状态）、过渡、z-index

Dropdown 元素本身（li 根标签）还有这些：

  • Top-level：HTML tag（默认 li）、触发文字、可选链接、aria-label（有图标时给 toggle 按钮，占位 “Toggle dropdown”）
  • Icon：图标、内边距、gap、位置、尺寸、颜色、变换（默认 vs aria-expanded="true"）、过渡
  • Caret：可选小三角——设了 Size 就加 caret 类，控制边框宽度/颜色/变换/位置
  • Content：Position: Static（面板留在文档流里，适合 Offcanvas 内，static 下拉只按点击切换）、Toggle on（click / hover / click or hover）、最小宽度、过渡/变换/背景/边框/阴影/排版
  • Item：面板内直接链接和子菜单 toggle 的行样式（justify-content、padding、背景、边框、排版、过渡）
  • Active：匹配 aria-current="page" 的状态样式

移动端菜单：断点与汉堡按钮

默认移动菜单在 Mobile landscape 断点出现：不再显示顶级菜单项，汉堡 Toggle 取而代之，点击展开移动菜单。断点可以在 Nav nestable 元素里改成任意值。

重要：改「Mobile menu」和「Nav items」元素的设置时，要把编辑器切到移动菜单开始显示的断点（默认 Mobile landscape），这样样式只作用于移动端。

  • 「Toggle (Open: Mobile)」开移动菜单，可配多种点击动画
  • 「Toggle (Close: Mobile)」在 Nav items（移动菜单容器）内部
  • Hide at breakpoint / Show at breakpoint：显示/隐藏移动菜单的断点，选项含全部断点 + Always/Never，默认 Mobile landscape
  • Width / Height：.brx-open .brx-nav-nested-items 的宽高
  • Padding (Dropdown)：移动端下拉内容内边距，用来给嵌套下拉做视觉层级
  • Align items / Justify content / Position / Background color：移动菜单布局与外观
  • Keep open while styling：编辑器里保持移动菜单展开方便调样式（加 brx-open 类，不存为设置）

Mega Menu：一键开启

做 Mega Menu 简单到不可思议：编辑任意 Dropdown 元素，开启 Mega menu 设置即可。

  • 默认下拉内容铺满整个可用（视口）宽度
  • 也可以填 CSS selector，让 Mega 面板的宽度和水平位置对齐页面上某个元素（例如外层 Container 的 id）
  • CSS selector (Vertical) 可以再指定垂直对齐参考

下拉的 Content 就是个 Div——想做什么布局都行，三列、带图片、带表单，随你嵌套。可以看本站的 页头模板构建 了解怎么和页头配合。

多级下拉与 Multilevel 模式

多级下拉同样简单：在单个 Dropdown 或直接在 Nav nestable 元素上开启 Multilevel，后者会应用到所有 Dropdown。

Multilevel 的含义：只有激活的下拉内容可见。适合菜单项很多、或嵌套多层 Dropdown 的场景（它们很容易溢出视口，移动端尤其）。

  • 可设置自定义「返回」链接，显示为每级下拉的第一项
  • 因为只有激活的下拉可见，multilevel 下拉自动按点击切换，不是 hover
  • 只在 Dropdown 根层开 Multilevel 就行，所有子 Dropdown 自动继承 multilevel 能力
  • Back 按钮的排版（.brx-multilevel-back）和背景色可单独设置

WordPress 菜单与 Nav menu 元素

想在自定义 nav nestable 里用 WordPress 菜单：在 Dropdown > Content 里加 Nav menu 元素，然后选要显示的 WordPress 菜单。设计思路是：每个 WordPress 菜单对应一个下拉里要显示的菜单项集合——既享受 nav nestable 的完全定制，又能用 WordPress 后台控制菜单。

WordPress 菜单也可以变 Mega Menu：Nav menu 元素上开 Mega menu 设置，用 section 类型的新模板做 Mega 内容，然后到 Appearance > Menus 展开想挂 Mega 的顶级菜单项，从 Mega menu 选项里选模板，前台 hover 就出现。多级 WordPress 菜单同理：Nav menu 元素开 Multilevel，再到 Appearance > Menus 里给菜单项开 Multilevel。

Offcanvas 独立移动菜单

想要和桌面菜单内容完全不同的移动菜单，用 Offcanvas + Toggle：

  1. 页面加 Offcanvas 元素——注意要放在 Nav (nestable) 外面（官方建议放在其后），否则两个可切换元素的 Toggle 逻辑会互相干扰；
  2. 不用默认移动菜单视图的话，删掉「Toggle (Close: Mobile)」元素；
  3. 复制 Offcanvas 元素 ID，编辑「Toggle (Open: Mobile)」，把 ID 粘贴进 CSS selector 设置；
  4. 保存后前台点 Toggle 就开 Offcanvas。

Offcanvas 特性：

  • 两种效果：slide-in（默认）和 offset
  • 预置一个关闭 Toggle，点背景（backdrop）也会关闭
  • 嵌套元素，里面可以放任意布局和元素
  • 编辑器里调样式时开 Keep open while styling，免得编辑别的元素时面板消失
  • Bricks 1.11 起还有 Toggle Offcanvas 交互，可以从任意元素开关 Offcanvas

还可以参考 Bricks 页头页脚教程 把整套菜单放进模板页头。

非全屏移动菜单与样式技巧

默认移动菜单是全屏的。不想全屏：

  1. 编辑 Nav (nestable)，Mobile menu 下把 Height 设成 fit-content——高度随内容自动伸缩；
  2. Position 按需调整，别盖住 Toggle；
  3. Nav items 是移动菜单容器，改它的 padding、背景等——记得在移动菜单断点上改，样式只作用于移动端；
  4. 不再全屏后，可以删掉默认的「Toggle (Close: Mobile)」。

Bonus tip：某些屏幕尺寸下移动菜单会盖住 Toggle，把 Toggle 的 Style > Layout > Z-index 设成 1001 或更高即可（Nav nestable 的 dropdown z-index 默认也是 1001）。

静态下拉（Position: Static）

默认下拉内容 position: absolute，脱离文档流——桌面菜单的正常行为。但下拉放在 Offcanvas 里时通常不想要这种表现，而是希望点击展开、面板紧贴 toggle 下方、留在文档流里。做法：编辑该 Dropdown，开启 Content > Position: Static。Static 下拉只按点击切换，不响应 hover。

小结

Bricks 菜单构建器 = Nav (nestable) 管结构 + Dropdown 管下拉/Mega + Toggle 管开关 + Offcanvas 管独立移动菜单 + Text link 管轻量链接。核心套路就四条：顶级项和下拉分块样式；移动菜单记住在对应断点上编辑；Mega Menu 就是 Dropdown 一个开关；独立移动菜单用 Offcanvas + CSS selector 方案。无障碍方面下拉箭头支持键盘 SPACE/ENTER 切换、菜单项自动包 li、当前页用 aria-current 高亮——这些默认就做好了。

延伸阅读

Ray Chan

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程

延伸阅读

tutorial

Bricks 制作页眉 Header 模板

教程：用 Bricks 模板做一次 Header，全站统一顶部品牌区——Logo、导航、CTA，并处理好粘性与手机汉堡菜单。

tutorial

Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

教程：Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。

tutorial

Bricks 按 ACF Gallery 图片数量做动态条件输出

教程：Bricks 按 ACF Gallery 图片数量做动态条件输出——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。

tutorial

Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据

教程：Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据——acf 附完整代码可直接复用，适合外贸独立站与 WordPress 开发者。

相关教程