Bricks Schema 中文文档：导航菜单

标签TAGS:

2026年8月30日

📄 原始资料（已截断） | 展开查看原始 JSON（nav-menu.json）{ “$schema”: “https://json-schema.org/draft/2020-12/schema”, “$id”: “bricks://elements/nav-menu”, “schemaVersion”: “2.3”, “type”: “object”, “title”: “Nav Menu”, “description”: “Schema for Bricks Nav Menu element”, “metadata”: { “name”: “nav-menu”,…

📄 原始资料（已截断） | 展开查看原始 JSON（nav-menu.json）

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "$id": "bricks://elements/nav-menu",
  "schemaVersion": "2.3",
  "type": "object",
  "title": "Nav Menu",
  "description": "Schema for Bricks Nav Menu element",
  "metadata": {
    "name": "nav-menu",
    "category": "wordpress",
    "tag": "div",
    "nestable": false
  },
  "settings": {
    "menu": {
      "label": "Menu",
      "valueSchema": {
        "oneOf": [
          {
            "type": "string",
            "description": "Single selection",
            "descriptionZh": "单选。"
          },
          {
            "type": "array",
            "items": {
              "type": "string"
            },
            "description": "Multiple selection",
            "descriptionZh": "多选。"
          }
        ]
      },
      "controlType": "select",
      "labelZh": "菜单"
    },
    "menuAlignment": {
      "label": "Alignment",
      "css": [
        {
          "property": "flex-direction",
          "selector": ".bricks-nav-menu"
        }
      ],
      "valueSchema": {
        "type": "string",
        "enum": [
          "row",
          "row-reverse",
          "column",
          "column-reverse"
        ]
      },
      "controlType": "direction",
      "labelZh": "对齐"
    },
    "menuJustifyContent": {
      "label": "Justify content",
      "css": [
        {
          "property": "justify-content",
          "selector": ".bricks-nav-menu > li > a"
        },
        {
          "property": "justify-content",
          "selector": ".bricks-nav-menu > li > .brx-submenu-toggle"
        }
      ],
      "valueSchema": {
        "type": "string",
        "enum": [
          "flex-start",
          "flex-end",
          "center",
          "space-between",
          "space-around",
          "space-evenly"
        ]
      },
      "controlType": "justify-content",
      "labelZh": "内容对齐"
    },
    "menuGap": {
      "label": "Gap",
      "units": true,
      "css": [
        {
          "property": "gap",
          "selector": ".bricks-nav-menu"
        }
      ],
      "valueSchema": {
        "oneOf": [
          {
            "type": "string",
            "description": "Value with unit (e.g., \"10px\", \"50%\")",
            "descriptionZh": "带单位的值（例如 \"10px\"、\"50%\"）。"
          },
          {
            "type": "number"
          }
        ]
      },
      "controlType": "number",
      "labelZh": "间距"
    },
    "menuMargin": {
      "label": "Margin",
      "css": [
        {
          "property": "margin",
          "selector": ".bricks-nav-menu > li"
        }
      ],
      "valueSchema": {
        "type": "object",
        "description": "Spacing value with directional properties",
        "properties": {
          "top": {
            "type": "string",
            "description": "Top spacing value with unit",
            "descriptionZh": "顶部间距值（带单位）。"
          },
          "right": {
            "type": "string",
            "description": "Right spacing value with unit",
            "descriptionZh": "右侧间距值（带单位）。"
          },
          "bottom": {
            "type": "string",
            "description": "Bottom spacing value with unit",
            "descriptionZh": "底部间距值（带单位）。"
          },
          "left": {
            "type": "string",
            "description": "Left spacing value with unit",
            "descriptionZh": "左侧间距值（带单位）。"
          }
        },
        "additionalProperties": false,
        "descriptionZh": "带方向属性的间距值。"
      },
      "controlType": "spacing",
      "labelZh": "外边距"
    },
    "menuPadding": {
      "label": "Padding",
      "css": [
        {
          "property": "padding",
          "selector": ".bricks-nav-menu > li > a"
        },
        {
          "property": "padding",
          "selector": ".bricks-nav-menu > li > .brx-submenu-toggle > *"
        }
      ],
      "valueSchema": {
        "type": "object",
        "description": "Spacing value with directional properties",
        "properties": {
          "top": {
            "type": "string",
            "description": "Top spacing value with unit",
            "descriptionZh": "顶部间距值（带单位）。"
          },
          "right": {
            "type": "string",
            "description": "Right spacing value with unit",
            "descriptionZh": "右侧间距值（带单位）。"
          },
          "bottom": {
            "type": "string",
            "description": "Bottom spacing value with unit",
            "descriptionZh": "底部间距值（带单位）。"
          },
          "left": {
            "type": "string",
            "description": "Left spacing value with unit",
            "descriptionZh": "左侧间距值（带单位）。"
          }
        },
        "additionalProperties": false,
        "descriptionZh": "带方向属性的间距值。"
      },
      "controlType": "spacing",
      "labelZh": "内边距"
    },
    "menuBackground": {
      "label": "Background",
      "css": [
        {
          "property": "background",
          "selector": ".bricks-nav-menu > li{pseudo} > a"
        },
        {
          "property": "background",
          "selector": ".bricks-nav-menu > li{pseudo} > .brx-submenu-toggle"
        }
      ],
      "valueSchema": {
        "type": "object",
        "description": "Background settings",
        "properties": {
          "color": {
            "description": "Color value in various formats",
            "oneOf": [
              {
                "type": "object",
                "properties": {
                  "hex": {
                    "type": "string",
                    "pattern": "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
                  }
                },
                "required": [
                  "hex"
                ]
              },
              {
                "type": "object",
                "properties": {
                  "rgb": {
                    "type": "string",
                    "pattern": "^rgba?\\("
                  }
                },
                "required": [
                  "rgb"
                ]
              },
              {
                "type": "object",
                "properties": {
                  "hsl": {
                    "type": "string",
                    "pattern": "^hsla?\\("
                  }
                },
                "required": [
                  "hsl"
                ]
              },
              {
                "type": "object",
                "properties": {
                  "raw": {
                    "type": "string",
                    "description": "Raw color value or CSS variable",
                    "descriptionZh": "原始颜色值或 CSS 变量。"
                  }
                },
                "required": [
                  "raw"
                ]
              }
            ],
            "descriptionZh": "各种格式的颜色值。"
          },
          "image": {
            "type": "object",
            "description": "Image settings",
            "properties": {
              "id": {
                "type": [
                  "string",
                  "integer"
                ]
              },
              "filename": {
                "type": "string"
              },
              "url": {
                "type": "string"
              },
              "size": {
                "type": "string"
              },
              "full": {
                "type": "string"
              },
              "useDynamicData": {
                "type": "string"
              }
            },
            "descriptionZh": "图像设置。"
          },
          "video": {
            "type": "object",
            "description": "Video settings",
            "properties": {
              "source": {
                "type": "string",
                "enum": [
                  "media",
                  "youtube",
                  "vimeo",
                  "url"
                ]
              },
              "id": {
                "type": [
                  "string",
                  "integer"
              

... (内容过长已截断，完整 JSON 见原始文件)

前言

Bricks Nav Menu 元素的 schema。

基本信息

英文名称：Nav Menu
中文名称：导航菜单
Schema ID：bricks://elements/nav-menu
Schema 版本：2.3
类型：object
分类：wordpress
Tag：div
内部名称：nav-menu

设置项

menu — 菜单 (select)
menuAlignment — 对齐 (direction)
menuJustifyContent — 内容对齐 (justify-content)
menuGap — 间距 (number)
menuMargin — 外边距 (spacing)
menuPadding — 内边距 (spacing)
menuBackground — 背景 (background)
menuBorder — 边框 (border)
menuTypography — 排版 (typography)
menuActiveBackground — 激活态背景 (background)
menuActiveBorder — 激活态边框 (border)
menuActiveTypography — 激活态排版 (typography)
menuIcon — 图标 (icon)
menuIconTransform — 图标变换 (transform)
menuIconTransformOpen — 图标变换 (transform)
menuIconTypography — 图标排版 (typography)
menuIconPosition — 图标位置 (select)
menuIconMargin — 图标外边距 (spacing)
menuIconPadding — 图标内边距 (spacing)
submenuStatic — 位置 (checkbox)
subMenuBackgroundList — 背景 (background)
subMenuBorder — 边框 (border)
subMenuBoxShadow — 盒子阴影 (box-shadow)
subMenuTransform — 变换 (transform)
subMenuTransformOpen — 变换 (transform)
caretSize — 尺寸 (number)
caretColor — 颜色 (color)
caretTransform — 变换 (transform)
caretPosition — 位置 (dimensions)
subMenuJustifyContent — 内容对齐 (justify-content)
subMenuPadding — 内边距 (spacing)
subMenuBackground — 背景 (background)
subMenuItemBorder — 边框 (border)
subMenuTypography — 排版 (typography)
subMenuActiveBackground — 激活态背景 (background)
subMenuActiveBorder — 激活态边框 (border)
subMenuActiveTypography — 激活态排版 (typography)
subMenuIcon — 图标 (icon)
subMenuIconSize — 图标尺寸 (number)
subMenuIconTransform — 图标变换 (transform)
subMenuIconTransformOpen — 图标变换 (transform)
subMenuIconTypography — 图标排版 (typography)
subMenuIconPosition — 图标位置 (select)
subMenuIconMargin — 图标外边距 (spacing)
subMenuIconPadding — 图标内边距 (spacing)
mobileMenu — mobileMenu (select)
mobileMenuCustomBreakpoint — 自定义断点 (number)
mobileMenuPosition — 位置 (select)
mobileMenuTop — 顶部 (number)
mobileMenuWidth — 宽度 (number)
mobileMenuHeight — 高度 (number)
mobileMenuFadeIn — 淡入 (checkbox)
mobileMenuAlignment — 垂直 (justify-content)
mobileMenuAlignItems — 水平 (align-items)
mobileMenuTextAlign — 文字对齐 (text-align)
mobileMenuBackground — 背景 (background)
mobileMenuBackgroundFilters — 背景滤镜 (filters)
mobileMenuBoxShadow — 盒子阴影 (box-shadow)
mobileMenuOverlay — 覆盖层 (background)
mobileMenuPadding — 内边距 (spacing)
mobileMenuItemBackground — 背景 (color)
mobileMenuItemBackgroundActive — 背景 (color)
mobileMenuBorder — 边框 (border)
mobileMenuActiveBorder — 边框 (border)
mobileMenuTypography — 排版 (typography)
mobileMenuActiveTypography — 排版 (typography)
mobileMenuIcon — 图标 (icon)
mobileMenuCloseIcon — 关闭图标 (icon)
mobileMenuIconTypography — 图标排版 (typography)
mobileMenuIconPosition — 图标位置 (select)
mobileMenuIconMargin — 图标外边距 (spacing)
mobileSubMenuPadding — 内边距 (spacing)
mobileSubMenuItemBackground — 背景 (color)
mobileSubMenuItemBackgroundActive — 背景 (color)
mobileSubMenuBorder — 边框 (border)
mobileSubMenuBorderActive — 边框 (border)
mobileSubMenuTypography — 排版 (typography)
mobileSubMenuActiveTypography — 激活态排版 (typography)
mobileMenuToggleAriaLabel — aria-label (text)
mobileMenuToggleWidth — 切换按钮宽度 (number)
mobileMenuToggleColor — 颜色 (color)
mobileMenuToggleHide — 隐藏关闭 (checkbox)
mobileMenuToggleColorClose — 关闭颜色 (color)
mobileMenuToggleClosePosition — 关闭按钮位置 (dimensions)
megaMenu — 启用 (checkbox)
megaMenuSelector — CSS 选择器 (text)
megaMenuToggleOn — 触发方式 (select)
megaMenuTransition — 过渡 (text)
megaMenuTransform — 变换 (transform)
megaMenuTransformOpen — 变换 (transform)
multiLevel — 启用 (checkbox)
multiLevelBackText — 返回 (text)
multiLevelBackTypography — 返回 (typography)
multiLevelBackground — 返回 (color)
_content — 内容 (text)
_margin — 外边距 (spacing)
_padding — 内边距 (spacing)
_width — 宽度 (number)
_widthMin — 最小宽度 (number)
_widthMax — 最大宽度 (number)
_height — 高度 (number)
_heightMin — 最小高度 (number)
_heightMax — 最大高度 (number)
_aspectRatio — 宽高比 (text)
_position — 位置 (select)
_top — 顶部 (number)
_right — 右侧 (number)
_bottom — 底部 (number)
_left — 左侧 (number)
_zIndex — Z 索引 (number)
_order — 顺序 (number)
_display — 显示 (select)
_visibility — 可见性 (select)
_overflow — 溢出 (text)
_opacity — 不透明度 (number)
_cursor — 光标 (select)
_isolation — 隔离 (select)
_mixBlendMode — 混合模式 (select)
_pointerEvents — 指针事件 (text)
_perspective — 透视 (number)
_perspectiveOrigin — 透视原点 (text)
_gridItemJustifySelf — 自身水平对齐 (align-items)
_flexDirection — 方向 (direction)
_alignSelf — 自身对齐 (align-items)
_justifyContent — 主轴对齐 (justify-content)
_alignItems — 交叉轴对齐 (align-items)
_gap — 间距 (number)
_flexGrow — 放大比例 (number)
_flexShrink — 缩小比例 (number)
_flexBasis — 伸缩基准 (text)
_useMasonry — %s 布局 (checkbox)
_masonryColumn — 列数 (number)
_masonryGutter — 间距 (number)
_masonryHorizontalOrder — 水平顺序 (checkbox)
_masonryTransitionDuration — 过渡 (number)
_masonryTransitionMode — 显现动画 (select)
_typography — _typography (typography)
_background — _background (background)
_shapeDividers — 自定义形状 (repeater)
_gradient — _gradient (gradient)
_border — 边框 (border)
_boxShadow — 盒子阴影 (box-shadow)
_transform — 变换 (transform)
_transformOrigin — 变换原点 (text)
_motionElementParallax — 元素视差 (checkbox)
_motionElementParallaxSpeedX — 水平速度 (number)
_motionElementParallaxSpeedY — 垂直速度 (number)
_motionBackgroundParallax — 背景视差 (checkbox)
_motionBackgroundParallaxSpeed — 背景速度 (number)
_motionStartVisiblePercent — 视差起点 (number)
_cssCustom — 自定义 CSS (code)
_cssClasses — CSS 类 (text)
_cssId — CSS ID (text)
_cssFilters — CSS 滤镜 (filters)
_cssTransition — 过渡 (text)
_attributes — 姓名 (repeater)
_scrollSnapType — 类型 (select)
_scrollSnapAlign — 对齐 (select)
_scrollSnapStop — 停止 (select)

补充说明

更多细节可参考 Bricks 官方 Academy 文档。