tusen-ai · Sepush · Nov 27, 2025
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Feats
+
+- `n-menu` adds `elipsis` prop and `render-elipsis` function for customizing elipsis when `mode='horizontal'` `responsive=true`.
+
 ## 2.43.2
 
 ### Fixes

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Feats
+
+- `n-menu` 新增 `elipsis` 属性与 `render-elipsis` 函数，用于 `mode='horizontal'` `responsive=true` 自定省略区域的展示内容
+
 ## 2.43.2
 
 ### Fixes

diff --git a/src/menu/demos/enUS/horizontal.demo.vue b/src/menu/demos/enUS/horizontal.demo.vue
@@ -103,18 +103,53 @@ const menuOptions: MenuOption[] = [
   }
 ]
 
+function renderElipsis(option: MenuOption) {
+  const count = option?.children?.length ?? 0
+  return h('span', { style: { color: 'green' } }, `+${count}`)
+}
+
 const activeKey = ref<string | null>(null)
 </script>
 
 <template>
-  <n-split :default-size="0.8">
-    <template #1>
-      <n-menu
-        v-model:value="activeKey"
-        mode="horizontal"
-        :options="menuOptions"
-        responsive
-      />
-    </template>
-  </n-split>
+  <n-flex vertical>
+    <n-split :default-size="0.8">
+      <template #1>
+        <n-menu
+          v-model:value="activeKey"
+          mode="horizontal"
+          :options="menuOptions"
+          responsive
+        />
+      </template>
+    </n-split>
+    <n-text strong>
+      elipsis
+    </n-text>
+    <n-split :default-size="0.8">
+      <template #1>
+        <n-menu
+          v-model:value="activeKey"
+          elipsis="->"
+          mode="horizontal"
+          :options="menuOptions"
+          responsive
+        />
+      </template>
+    </n-split>
+    <n-text strong>
+      render-elipsis
+    </n-text>
+    <n-split :default-size="0.8">
+      <template #1>
+        <n-menu
+          v-model:value="activeKey"
+          mode="horizontal"
+          :options="menuOptions"
+          :render-elipsis="renderElipsis"
+          responsive
+        />
+      </template>
+    </n-split>
+  </n-flex>
 </template>
diff --git a/src/menu/demos/enUS/index.demo-entry.md b/src/menu/demos/enUS/index.demo-entry.md
@@ -39,6 +39,7 @@ show.vue
 | disabled-field | `string` | `'disabled'` | Field name of disabled. | 2.33.0 |
 | dropdown-placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| ` | `'top'` | Only effective in horizontal mode. |  |
 | dropdown-props | `DropdownProps` | `undefined` | The dropdown's props when menu is collapsed or horizontal mode，please see [Dropdown Props](dropdown#Dropdown-Props) |  |
+| elipsis | `string \| (() => VNodeChild)` | `undefined` | Custom content of ellipsis area when `mode='horizontal'` `responsive=true`. | NEXT_VERSION |
 | expanded-keys | `Array<string>` | `undefined` | The expanded submenu keys. If set, menu will work in controlled manner and `default-expanded-names` won't work. |  |
 | expand-icon | `(option: MenuOption) => VNodeChild` | `undefined` | Render function that renders all expand icon. |  |
 | icon-size | `number` | `20` | The icon size when menu is not collapsed. |  |
@@ -49,6 +50,7 @@ show.vue
 | options | `Array<MenuOption \| MenuDividerOption \| MenuGroupOption>` | `[]` | Items data of menu. |  |
 | node-props | `(option: MenuOption \| MenuGroupOption) => object` | `undefined` | Node's DOM attrs generator. | 2.28.3 |
 | mode | `'vertical' \| 'horizontal'` | `'vertical'` | Menu layout. |  |
+| render-elipsis | `(options: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | Custom render function of ellipsis area when `mode='horizontal'` `responsive=true`. | NEXT_VERSION |
 | render-extra | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | Render function that renders all extras. |  |
 | render-icon | `(option: MenuOption) => VNodeChild` | `undefined` | Render function that renders all icons. |  |
 | render-label | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | Render function that renders all labels. |  |

diff --git a/src/menu/demos/zhCN/horizontal.demo.vue b/src/menu/demos/zhCN/horizontal.demo.vue
@@ -103,18 +103,53 @@ const menuOptions: MenuOption[] = [
   }
 ]
 
+function renderElipsis(option: MenuOption) {
+  const count = option?.children?.length ?? 0
+  return h('span', { style: { color: 'green' } }, `+${count}`)
+}
+
 const activeKey = ref<string | null>(null)
 </script>
 
 <template>
-  <n-split :default-size="0.8">
-    <template #1>
-      <n-menu
-        v-model:value="activeKey"
-        mode="horizontal"
-        :options="menuOptions"
-        responsive
-      />
-    </template>
-  </n-split>
+  <n-flex vertical>
+    <n-split :default-size="0.8">
+      <template #1>
+        <n-menu
+          v-model:value="activeKey"
+          mode="horizontal"
+          :options="menuOptions"
+          responsive
+        />
+      </template>
+    </n-split>
+    <n-text strong>
+      elipsis
+    </n-text>
+    <n-split :default-size="0.8">
+      <template #1>
+        <n-menu
+          v-model:value="activeKey"
+          elipsis="->"
+          mode="horizontal"
+          :options="menuOptions"
+          responsive
+        />
+      </template>
+    </n-split>
+    <n-text strong>
+      render-elipsis
+    </n-text>
+    <n-split :default-size="0.8">
+      <template #1>
+        <n-menu
+          v-model:value="activeKey"
+          mode="horizontal"
+          :options="menuOptions"
+          :render-elipsis="renderElipsis"
+          responsive
+        />
+      </template>
+    </n-split>
+  </n-flex>
 </template>
diff --git a/src/menu/demos/zhCN/index.demo-entry.md b/src/menu/demos/zhCN/index.demo-entry.md
@@ -41,6 +41,7 @@ show-debug.vue
 | disabled-field | `string` | `'disabled'` | disabled 的字段名 | 2.33.0 |
 | dropdown-placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| ` | `'top'` | 仅在 `mode='horizontal'` 模式下生效 |  |
 | dropdown-props | `DropdownProps` | `undefined` | 菜单折叠或 `mode='horizontal'` 模式时 Dropdown 的 props，请参考 [Dropdown Props](dropdown#Dropdown-Props) |  |
+| elipsis | `string \| (() => VNodeChild)` | `undefined` | `mode='horizontal'` `responsive=true` 模式时自定义省略区域内容 | NEXT_VERSION |
 | expanded-keys | `Array<string>` | `undefined` | 展开的子菜单标识符数组，如果设定了，菜单的展开将会进入受控状态，`default-expanded-keys` 不会生效 |  |
 | expand-icon | `(option: MenuOption) => VNodeChild` | `undefined` | 批量处理菜单展开图标的渲染 |  |
 | icon-size | `number` | `20` | 菜单未折叠时图标的大小 |  |
@@ -51,6 +52,7 @@ show-debug.vue
 | options | `Array<MenuOption \| MenuDividerOption \| MenuGroupOption>` | `[]` | 菜单的数据 |  |
 | node-props | `(option: MenuOption \| MenuGroupOption) => object` | `undefined` | 节点的 DOM 属性生成函数 | 2.28.3 |
 | mode | `'vertical' \| 'horizontal'` | `'vertical'` | 菜单的布局方式 |  |
+| render-elipsis | `(options: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | 自定义 `mode='horizontal'` `responsive=true` 时溢出指示的展示内容 | NEXT_VERSION |
 | render-extra | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | 批量处理菜单额外部分渲染 |  |
 | render-icon | `(option: MenuOption) => VNodeChild` | `undefined` | 批量处理菜单图标渲染 |  |
 | render-label | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | 批量处理菜单标签渲染 |  |

diff --git a/src/menu/src/Menu.tsx b/src/menu/src/Menu.tsx
@@ -64,6 +64,7 @@ export const menuProps = {
     type: Number,
     default: 24
   },
+  elipsis: [String, Function] as PropType<string | (() => VNodeChild)>,
   rootIndent: Number,
   indent: {
     type: Number,
@@ -118,6 +119,9 @@ export const menuProps = {
   renderLabel: Function as PropType<
     (option: MenuOption | MenuGroupOption) => VNodeChild
   >,
+  renderElipsis: Function as PropType<
+    (option: MenuOption | MenuGroupOption) => VNodeChild
+  >,
   renderExtra: Function as PropType<
     (option: MenuOption | MenuGroupOption) => VNodeChild
   >,
@@ -552,6 +556,7 @@ export default defineComponent({
       ]).treeNodes[0]
     })
     function renderCounter(): VNodeChild {
+      const { elipsis = '...' } = props
       if (ellipsisFromIndexRef.value === -1) {
         // Only a placeholder
         return (
@@ -560,7 +565,7 @@ export default defineComponent({
             level={0}
             key="__ellpisisGroupPlaceholder__"
             internalKey="__ellpisisGroupPlaceholder__"
-            title="···"
+            title={elipsis}
             tmNode={emptyTmNodeRef.value}
             domId={ellipsisNodeId}
             isEllipsisPlaceholder
@@ -578,7 +583,7 @@ export default defineComponent({
           root
           key="__ellpisisGroup__"
           internalKey="__ellpisisGroup__"
-          title="···"
+          title={elipsis}
           virtualChildActive={childActive}
           tmNode={tmNode}
           domId={ellipsisNodeId}

diff --git a/src/menu/src/MenuOptionContent.tsx b/src/menu/src/MenuOptionContent.tsx
@@ -65,7 +65,13 @@ export default defineComponent({
     const {
       clsPrefix,
       tmNode,
-      menuProps: { renderIcon, renderLabel, renderExtra, expandIcon }
+      menuProps: {
+        renderIcon,
+        renderLabel,
+        renderElipsis,
+        renderExtra,
+        expandIcon
+      }
     } = this
     const icon = renderIcon ? renderIcon(tmNode.rawNode) : render(this.icon)
     return (
@@ -97,7 +103,9 @@ export default defineComponent({
         )}
         <div class={`${clsPrefix}-menu-item-content-header`} role="none">
           {this.isEllipsisPlaceholder
-            ? this.title
+            ? renderElipsis
+              ? renderElipsis(tmNode.rawNode)
+              : this.title
             : renderLabel
               ? renderLabel(tmNode.rawNode)
               : render(this.title)}