多层级结构

Navi+ 支持两种深度组织菜单内容的方式：父子嵌套（左右拖拽缩进）和 Tab Slide（将菜单分割为水平切换区域）。您可以单独使用任一方式，也可以将两者结合使用。

方式一 — 父子嵌套（拖拽缩进）

嵌套将平铺列表转换为分层级的层次结构。父项可以展开以显示其子项。

Home                        ← 第1级（父项）
  Collections               ← 第2级（子项）
    New Arrivals            ← 第3级（孙项）
    Sale
  Lookbook
Contact                     ← 第1级（父项，无子项）

操作方法

通过拖拽

  1. 将鼠标悬停在要嵌套的菜单项上。
  2. 向右拖拽 — 它会作为子项吸附到上方项目下面。
  3. 向左拖拽将其移回父级。

通过键盘快捷键

  1. 单击菜单项将其选中。
  2. 按 →（右箭头键）缩进 — 该项成为上方项目的子项。
  3. 按 ←（左箭头键）取消缩进 — 该项上移一个层级。

按菜单类型的最大嵌套深度

深度限制取决于菜单类型，与套餐无关。

菜单类型 最大层数
Mobile Grid 1（不支持嵌套）
FAB 2
Tab Bar、Mega Menu、Slide Menu、Desktop Mega Menu 3

如果您尝试超过限制继续缩进，编辑器会阻止并显示提示消息。

方式二 — Tab Slide（水平区域）

Tab Slide 将项目分成水平标签页。每个标签页显示独立的项目集合，而不是像子项一样向下展开。

┌─────────────────────────────────┐
│  [Shop]  [Pages]  [More]        │  ← 标签页标题
├─────────────────────────────────┤
│  • Collections                  │
│  • New Arrivals                 │  ← 当前标签页的内容
│  • Sale                         │
└─────────────────────────────────┘

操作方法

  1. 添加一个类型为 Tab Marker 的新项目。
  2. 设置 Tab Marker 的标签 — 这将成为标签页标题文字（例如”Shop”）。
  3. 在 Tab Marker 下方添加项目 — 它们属于该标签页的内容区域。
  4. 重复：添加下一个 Tab Marker，然后为该标签页添加项目。
[Tab Marker]  "Shop"
  Collections
  New Arrivals
  Sale

[Tab Marker]  "Pages"
  About us
  Contact

[Tab Marker]  "More"
  Blog
  FAQ

如何选择方式？

目标 使用方式
在父项下显示子分类 父子嵌套（方式一）
将不相关的板块并排分组 Tab Slide（方式二）
包含多个分类大量项目的菜单 Tab Slide
深层下钻导航（分类 → 子分类） 父子嵌套
每个标签页内包含嵌套项目的外部标签 两者结合

注意事项

  • Tab Marker 不能嵌套在其他项目内。 对 Tab Marker 进行缩进操作会被阻止。
  • 标签页内的项目仍然可以有子项 — 受菜单类型的深度限制约束。
  • Mobile Grid 不支持嵌套 — 如果需要分组，请使用 Tab Slide。
  • 通过上下拖拽 Tab Marker 来重新排列标签页 — 其下方的项目会跟随移动。