From 8ab50b175720d07b94895a65595e34046571ae33 Mon Sep 17 00:00:00 2001
From: Cherry7 <79909910+CCherry07@users.noreply.github.com>
Date: Sun, 23 Apr 2023 14:23:15 +0800
Subject: [PATCH] feat(menu): icon support function components with items and
 update demo (#6457)

* fix(menu): icon do not show problem

* fix(menu): icon do not show problem

* feat(menu): update demo

* test(menu): update demo snap

* chore(Menu): update docs

* test(Menu): update demo

* Update MenuItem.tsx

* Update SubMenu.tsx

---------

Co-authored-by: tangjinzhou <415800467@qq.com>
---
 components/components.ts                      |   1 +
 .../__tests__/__snapshots__/demo.test.js.snap | 191 +++++++++---------
 components/menu/demo/horizontal.vue           | 103 +++++-----
 components/menu/demo/index.vue                |  10 +-
 components/menu/demo/inline-collapsed.vue     | 188 +++++++++--------
 components/menu/demo/inline.vue               | 133 ++++++------
 components/menu/demo/sider-current.vue        | 120 +++++------
 components/menu/demo/submenu-theme.vue        |  84 ++++++++
 components/menu/demo/switch-mode.vue          | 128 ++++++------
 components/menu/demo/template.vue             | 127 ------------
 components/menu/demo/theme.vue                | 144 +++++++------
 components/menu/demo/vertical.vue             | 141 +++++++------
 components/menu/index.en-US.md                |  64 +++++-
 components/menu/index.tsx                     |   2 +
 components/menu/index.zh-CN.md                |  63 +++++-
 components/menu/src/MenuItem.tsx              |   2 +-
 components/menu/src/SubMenu.tsx               |   2 +-
 17 files changed, 823 insertions(+), 680 deletions(-)
 create mode 100644 components/menu/demo/submenu-theme.vue
 delete mode 100644 components/menu/demo/template.vue

diff --git a/components/components.ts b/components/components.ts
index bcd3dfeca..d6b1e6d80 100644
--- a/components/components.ts
+++ b/components/components.ts
@@ -116,6 +116,7 @@ export type {
   MenuItemProps,
   MenuMode,
   MenuDividerProps,
+  ItemType,
 } from './menu';
 export { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu';
 
diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap
index 16485ab6f..1841b5743 100644
--- a/components/menu/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap
@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/menu/demo/horizontal.vue correctly 1`] = `
-<ul class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light" role="menu" data-menu-list="true">
+<ul class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light css-dev-only-do-not-override-1tii49m" role="menu" data-menu-list="true">
   <!---->
-  <li class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected" style="opacity: 1; order: 0;" role="menuitem" tabindex="-1" data-menu-id="mail" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content"> Navigation One </span></li>
+  <li class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected" style="opacity: 1; order: 0;" role="menuitem" tabindex="-1" data-menu-id="mail" aria-disabled="false" title="Navigation One"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span></li>
   <!---->
-  <li class="ant-menu-overflow-item ant-menu-item ant-menu-item-disabled" style="opacity: 1; order: 1;" role="menuitem" data-menu-id="app" aria-disabled="true"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content"> Navigation Two </span></li>
+  <li class="ant-menu-overflow-item ant-menu-item" style="opacity: 1; order: 1;" role="menuitem" tabindex="-1" data-menu-id="app" aria-disabled="false" title="Navigation Two"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span></li>
   <li class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal" style="opacity: 1; order: 2;" role="none" data-submenu-id="sub1">
     <!---->
     <div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_1_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Three - Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
     <!---->
   </li>
   <!---->
-  <li class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child" style="opacity: 1; order: 3;" role="menuitem" tabindex="-1" data-menu-id="alipay" aria-disabled="false">
-    <!----><span class="ant-menu-title-content"><a href="https://antdv.com" target="_blank" rel="noopener noreferrer"> Navigation Four - Link </a></span>
+  <li class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child" style="opacity: 1; order: 3;" role="menuitem" tabindex="-1" data-menu-id="alipay" aria-disabled="false" title="Navigation Four - Link">
+    <!----><span class="ant-menu-title-content"><a href="https://antdv.com" target="_blank">Navigation Four - Link</a></span>
   </li>
   <li class="ant-menu-overflow-item ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal" style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;" aria-hidden="true" role="none" data-submenu-id="$$__vc-menu-more__key">
     <!---->
@@ -28,13 +28,13 @@ exports[`renders ./components/menu/demo/horizontal.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
-<ul id="dddddd" class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width: 256px;" role="menu" data-menu-list="true">
+<ul id="dddddd" class="ant-menu ant-menu-root ant-menu-inline ant-menu-light css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
   <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
     <!---->
     <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_9_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div>
     <ul id="sub_menu_9_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
       <li class="ant-menu-item-group">
-        <div class="ant-menu-item-group-title">Item 1</div>
+        <div title="Item 1" class="ant-menu-item-group-title">Item 1</div>
         <ul class="ant-menu-item-group-list">
           <!---->
           <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false">
@@ -89,6 +89,7 @@ exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
       </li>
     </ul>
   </li>
+  <li class="ant-menu-item-divider"></li>
   <li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub4">
     <!---->
     <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub4" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_12_$$_sub4-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
@@ -111,6 +112,19 @@ exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
       </li>
     </ul>
   </li>
+  <li class="ant-menu-item-group">
+    <div title="Group" class="ant-menu-item-group-title">Group</div>
+    <ul class="ant-menu-item-group-list">
+      <!---->
+      <li class="ant-menu-item ant-menu-item-only-child" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="13" aria-disabled="false">
+        <!----><span class="ant-menu-title-content">Option 13</span>
+      </li>
+      <!---->
+      <li class="ant-menu-item ant-menu-item-only-child" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="14" aria-disabled="false">
+        <!----><span class="ant-menu-title-content">Option 14</span>
+      </li>
+    </ul>
+  </li>
   <!---->
   <!---->
   <!--teleport start-->
@@ -119,34 +133,34 @@ exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = `
-<div style="width: 256px;"><button style="margin-bottom: 16px;" class="ant-btn ant-btn-primary" type="button">
+<div style="width: 256px;"><button style="margin-bottom: 16px;" class="css-dev-only-do-not-override-1tii49m ant-btn ant-btn-primary" type="button">
     <!----><span role="img" aria-label="menu-fold" class="anticon anticon-menu-fold"><svg focusable="false" class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span>
   </button>
-  <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" role="menu" data-menu-list="true">
+  <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark css-dev-only-do-not-override-1tii49m" role="menu" data-menu-list="true">
     <!---->
-    <li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="pie-chart" class="anticon anticon-pie-chart ant-menu-item-icon"><svg focusable="false" class="" data-icon="pie-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path></svg></span><span class="ant-menu-title-content"><span>Option 1</span></span></li>
+    <li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false" title="Option 1"><span role="img" aria-label="pie-chart" class="anticon anticon-pie-chart ant-menu-item-icon"><svg focusable="false" class="" data-icon="pie-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path></svg></span><span class="ant-menu-title-content">Option 1</span></li>
     <!---->
-    <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false"><span role="img" aria-label="desktop" class="anticon anticon-desktop ant-menu-item-icon"><svg focusable="false" class="" data-icon="desktop" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"></path></svg></span><span class="ant-menu-title-content"><span>Option 2</span></span></li>
+    <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false" title="Option 2"><span role="img" aria-label="desktop" class="anticon anticon-desktop ant-menu-item-icon"><svg focusable="false" class="" data-icon="desktop" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"></path></svg></span><span class="ant-menu-title-content">Option 2</span></li>
     <!---->
-    <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false"><span role="img" aria-label="inbox" class="anticon anticon-inbox ant-menu-item-icon"><svg focusable="false" class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span><span class="ant-menu-title-content"><span>Option 3</span></span></li>
+    <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false" title="Option 3"><span role="img" aria-label="inbox" class="anticon anticon-inbox ant-menu-item-icon"><svg focusable="false" class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span><span class="ant-menu-title-content">Option 3</span></li>
     <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
       <!---->
       <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_3_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div>
       <ul id="sub_menu_3_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
+        <li title="Option 5" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 5</span>
         </li>
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="6" aria-disabled="false">
+        <li title="Option 6" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="6" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 6</span>
         </li>
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false">
+        <li title="Option 7" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 7</span>
         </li>
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="8" aria-disabled="false">
+        <li title="Option 8" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="8" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 8</span>
         </li>
       </ul>
@@ -156,11 +170,11 @@ exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = `
       <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_4_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span><i class="ant-menu-submenu-arrow"></i></div>
       <ul id="sub_menu_4_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;">
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="9" aria-disabled="false">
+        <li title="Option 9" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="9" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 9</span>
         </li>
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="10" aria-disabled="false">
+        <li title="Option 10" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="10" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 10</span>
         </li>
         <li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="sub3">
@@ -168,11 +182,11 @@ exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = `
           <div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub3" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_5_$$_sub3-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
           <ul id="sub_menu_5_$$_sub3-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;">
             <!---->
-            <li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="11" aria-disabled="false">
+            <li title="Option 11" style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="11" aria-disabled="false">
               <!----><span class="ant-menu-title-content">Option 11</span>
             </li>
             <!---->
-            <li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="12" aria-disabled="false">
+            <li title="Option 12" style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="12" aria-disabled="false">
               <!----><span class="ant-menu-title-content">Option 12</span>
             </li>
           </ul>
@@ -189,7 +203,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = `
 
 exports[`renders ./components/menu/demo/sider-current.vue correctly 1`] = `
 <div>
-  <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width: 256px;" role="menu" data-menu-list="true">
+  <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
     <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
       <!---->
       <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_17_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div>
@@ -214,9 +228,7 @@ exports[`renders ./components/menu/demo/sider-current.vue correctly 1`] = `
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub2">
       <!---->
-      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_18_$$_sub2-popup" aria-disabled="false">
-        <!----><span class="ant-menu-title-content"><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span> Navigation Two </span><i class="ant-menu-submenu-arrow"></i>
-      </div>
+      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_18_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span><i class="ant-menu-submenu-arrow"></i></div>
       <ul id="sub_menu_18_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;">
         <!---->
         <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
@@ -272,25 +284,53 @@ exports[`renders ./components/menu/demo/sider-current.vue correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/menu/demo/submenu-theme.vue correctly 1`] = `
+<div><button type="button" role="switch" aria-checked="false" class="ant-switch css-dev-only-do-not-override-1tii49m">
+    <div class="ant-switch-handle">
+      <!---->
+    </div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">dark</span><span class="ant-switch-inner-unchecked">light</span></span>
+  </button><br><br>
+  <ul class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
+    <li class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open" role="none" data-submenu-id="sub1">
+      <!---->
+      <div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_25_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div>
+      <!---->
+    </li>
+    <!---->
+    <li class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
+      <!----><span class="ant-menu-title-content">Option 5</span>
+    </li>
+    <!---->
+    <li class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="6" aria-disabled="false">
+      <!----><span class="ant-menu-title-content">Option 6</span>
+    </li>
+    <!---->
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </ul>
+</div>
+`;
+
 exports[`renders ./components/menu/demo/switch-mode.vue correctly 1`] = `
-<div><button type="button" role="switch" aria-checked="false" class="ant-switch">
+<div><button type="button" role="switch" aria-checked="false" class="ant-switch css-dev-only-do-not-override-1tii49m">
     <div class="ant-switch-handle">
       <!---->
-    </div><span class="ant-switch-inner"><!----></span>
-  </button> Change Mode <span class="ant-divider" style="margin: 0px 1em;"></span><button type="button" role="switch" aria-checked="false" class="ant-switch">
+    </div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
+  </button> Change Mode <span class="ant-divider" style="margin: 0px 1em;"></span><button type="button" role="switch" aria-checked="false" class="ant-switch css-dev-only-do-not-override-1tii49m">
     <div class="ant-switch-handle">
       <!---->
-    </div><span class="ant-switch-inner"><!----></span>
+    </div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
   </button> Change Theme <br><br>
-  <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width: 256px;" role="menu" data-menu-list="true">
+  <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
     <!---->
-    <li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content"> Navigation One </span></li>
+    <li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span></li>
     <!---->
-    <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content"> Navigation Two </span></li>
+    <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span></li>
     <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
       <!---->
-      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_25_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul id="sub_menu_25_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
+      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_27_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span><i class="ant-menu-submenu-arrow"></i></div>
+      <ul id="sub_menu_27_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
         <!---->
         <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 3</span>
@@ -301,8 +341,8 @@ exports[`renders ./components/menu/demo/switch-mode.vue correctly 1`] = `
         </li>
         <li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="sub1-2">
           <!---->
-          <div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1-2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_26_$$_sub1-2-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
-          <ul id="sub_menu_26_$$_sub1-2-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;">
+          <div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1-2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_28_$$_sub1-2-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
+          <ul id="sub_menu_28_$$_sub1-2-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;">
             <!---->
             <li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
               <!----><span class="ant-menu-title-content">Option 5</span>
@@ -317,8 +357,8 @@ exports[`renders ./components/menu/demo/switch-mode.vue correctly 1`] = `
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub2">
       <!---->
-      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_27_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Four</span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul id="sub_menu_27_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;">
+      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_29_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
+      <ul id="sub_menu_29_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;">
         <!---->
         <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 7</span>
@@ -345,68 +385,39 @@ exports[`renders ./components/menu/demo/switch-mode.vue correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/menu/demo/template.vue correctly 1`] = `
-<div style="width: 256px;"><button style="margin-bottom: 16px;" class="ant-btn ant-btn-primary" type="button">
-    <!----><span role="img" aria-label="menu-fold" class="anticon anticon-menu-fold"><svg focusable="false" class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span>
-  </button>
-  <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" role="menu" data-menu-list="true">
-    <!---->
-    <li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="pie-chart" class="anticon anticon-pie-chart ant-menu-item-icon"><svg focusable="false" class="" data-icon="pie-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path></svg></span><span class="ant-menu-title-content"> Option 1</span></li>
-    <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="2">
-      <!---->
-      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="2" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_31_$$_2-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation 2</span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul id="sub_menu_31_$$_2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
-        <li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="2.1">
-          <!---->
-          <div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="2.1" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_32_$$_2.1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation 3</span><i class="ant-menu-submenu-arrow"></i></div>
-          <ul id="sub_menu_32_$$_2.1-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;">
-            <!---->
-            <li style="padding-left: 72px;" class="ant-menu-item" role="menuitem" tabindex="-1" data-menu-id="2.1.1" aria-disabled="false"><span role="img" aria-label="pie-chart" class="anticon anticon-pie-chart ant-menu-item-icon"><svg focusable="false" class="" data-icon="pie-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path></svg></span><span class="ant-menu-title-content"> Option 2.1.1</span></li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-    <!---->
-    <!---->
-    <!--teleport start-->
-    <!--teleport end-->
-  </ul>
-</div>
-`;
-
 exports[`renders ./components/menu/demo/theme.vue correctly 1`] = `
-<div><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
+<div><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch css-dev-only-do-not-override-1tii49m">
     <div class="ant-switch-handle">
       <!---->
-    </div><span class="ant-switch-inner">Dark</span>
+    </div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">Dark</span><span class="ant-switch-inner-unchecked">Light</span></span>
   </button><br><br>
-  <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" style="width: 256px;" role="menu" data-menu-list="true">
+  <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
     <!---->
-    <li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content"> Navigation One </span></li>
+    <li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false" title="Navigation One"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span></li>
     <!---->
-    <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content"> Navigation Two </span></li>
+    <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false" title="Navigation Two"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span></li>
     <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
       <!---->
-      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_35_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul id="sub_menu_35_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
+      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_33_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
+      <ul id="sub_menu_33_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false">
+        <li title="Option 3" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 3</span>
         </li>
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="4" aria-disabled="false">
+        <li title="Option 4" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="4" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 4</span>
         </li>
         <li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="sub1-2">
           <!---->
-          <div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1-2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_36_$$_sub1-2-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
-          <ul id="sub_menu_36_$$_sub1-2-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;">
+          <div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1-2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_34_$$_sub1-2-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
+          <ul id="sub_menu_34_$$_sub1-2-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;">
             <!---->
-            <li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
+            <li title="Option 5" style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
               <!----><span class="ant-menu-title-content">Option 5</span>
             </li>
             <!---->
-            <li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="6" aria-disabled="false">
+            <li title="Option 6" style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="6" aria-disabled="false">
               <!----><span class="ant-menu-title-content">Option 6</span>
             </li>
           </ul>
@@ -415,22 +426,22 @@ exports[`renders ./components/menu/demo/theme.vue correctly 1`] = `
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub2">
       <!---->
-      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_37_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Four</span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul id="sub_menu_37_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;">
+      <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_35_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Four</span><i class="ant-menu-submenu-arrow"></i></div>
+      <ul id="sub_menu_35_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;">
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false">
+        <li title="Option 7" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 7</span>
         </li>
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="8" aria-disabled="false">
+        <li title="Option 8" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="8" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 8</span>
         </li>
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="9" aria-disabled="false">
+        <li title="Option 9" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="9" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 9</span>
         </li>
         <!---->
-        <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="10" aria-disabled="false">
+        <li title="Option 10" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="10" aria-disabled="false">
           <!----><span class="ant-menu-title-content">Option 10</span>
         </li>
       </ul>
@@ -444,19 +455,19 @@ exports[`renders ./components/menu/demo/theme.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/menu/demo/vertical.vue correctly 1`] = `
-<ul class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light" style="width: 256px;" role="menu" data-menu-list="true">
+<ul class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
   <!---->
-  <li class="ant-menu-item" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content"> Navigation One </span></li>
+  <li class="ant-menu-item" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false" title="Navigation One"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span></li>
   <!---->
-  <li class="ant-menu-item" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content"> Navigation Two </span></li>
+  <li class="ant-menu-item" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false" title="Navigation Two"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span></li>
   <li class="ant-menu-submenu ant-menu-submenu-vertical" role="none" data-submenu-id="sub1">
     <!---->
-    <div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_41_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
+    <div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_39_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
     <!---->
   </li>
   <li class="ant-menu-submenu ant-menu-submenu-vertical" role="none" data-submenu-id="sub2">
     <!---->
-    <div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_42_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Four</span><i class="ant-menu-submenu-arrow"></i></div>
+    <div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_40_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Four</span><i class="ant-menu-submenu-arrow"></i></div>
     <!---->
   </li>
   <!---->
diff --git a/components/menu/demo/horizontal.vue b/components/menu/demo/horizontal.vue
index 670ac66ab..9038f81d9 100644
--- a/components/menu/demo/horizontal.vue
+++ b/components/menu/demo/horizontal.vue
@@ -17,54 +17,65 @@ Horizontal top navigation menu.
 </docs>
 
 <template>
-  <a-menu v-model:selectedKeys="current" mode="horizontal">
-    <a-menu-item key="mail">
-      <template #icon>
-        <mail-outlined />
-      </template>
-      Navigation One
-    </a-menu-item>
-    <a-menu-item key="app" disabled>
-      <template #icon>
-        <appstore-outlined />
-      </template>
-      Navigation Two
-    </a-menu-item>
-    <a-sub-menu key="sub1">
-      <template #icon>
-        <setting-outlined />
-      </template>
-      <template #title>Navigation Three - Submenu</template>
-      <a-menu-item-group title="Item 1">
-        <a-menu-item key="setting:1">Option 1</a-menu-item>
-        <a-menu-item key="setting:2">Option 2</a-menu-item>
-      </a-menu-item-group>
-      <a-menu-item-group title="Item 2">
-        <a-menu-item key="setting:3">Option 3</a-menu-item>
-        <a-menu-item key="setting:4">Option 4</a-menu-item>
-      </a-menu-item-group>
-    </a-sub-menu>
-    <a-menu-item key="alipay">
-      <a href="https://antdv.com" target="_blank" rel="noopener noreferrer">
-        Navigation Four - Link
-      </a>
-    </a-menu-item>
-  </a-menu>
+  <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
 </template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { h, ref } from 'vue';
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
-export default defineComponent({
-  components: {
-    MailOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
+const current = ref<string[]>(['mail']);
+const items = ref([
+  {
+    key: 'mail',
+    icon: () => h(MailOutlined),
+    label: 'Navigation One',
+    title: 'Navigation One',
   },
-  setup() {
-    const current = ref<string[]>(['mail']);
-    return {
-      current,
-    };
+  {
+    key: 'app',
+    icon: () => h(AppstoreOutlined),
+    label: 'Navigation Two',
+    title: 'Navigation Two',
   },
-});
+  {
+    key: 'sub1',
+    icon: () => h(SettingOutlined),
+    label: 'Navigation Three - Submenu',
+    title: 'Navigation Three - Submenu',
+    children: [
+      {
+        type: 'group',
+        label: 'Item 1',
+        children: [
+          {
+            label: 'Option 1',
+            key: 'setting:1',
+          },
+          {
+            label: 'Option 2',
+            key: 'setting:2',
+          },
+        ],
+      },
+      {
+        type: 'group',
+        label: 'Item 2',
+        children: [
+          {
+            label: 'Option 3',
+            key: 'setting:3',
+          },
+          {
+            label: 'Option 4',
+            key: 'setting:4',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: 'alipay',
+    label: h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
+    title: 'Navigation Four - Link',
+  },
+]);
 </script>
diff --git a/components/menu/demo/index.vue b/components/menu/demo/index.vue
index b11fef036..af0a2eb8a 100644
--- a/components/menu/demo/index.vue
+++ b/components/menu/demo/index.vue
@@ -4,10 +4,10 @@
     <inline />
     <inline-collapsed />
     <sider-current />
-    <switch-mode />
-    <theme />
     <vertical />
-    <TemplateSingleFile />
+    <theme />
+    <submenu-theme />
+    <switch-mode />
   </demo-sort>
 </template>
 
@@ -22,7 +22,7 @@ import SiderCurrent from './sider-current.vue';
 import SwitchMode from './switch-mode.vue';
 import Theme from './theme.vue';
 import Vertical from './vertical.vue';
-import TemplateSingleFile from './template.vue';
+import SubmenuTheme from './submenu-theme.vue';
 
 export default defineComponent({
   CN,
@@ -35,7 +35,7 @@ export default defineComponent({
     SwitchMode,
     Theme,
     Vertical,
-    TemplateSingleFile,
+    SubmenuTheme,
   },
 });
 </script>
diff --git a/components/menu/demo/inline-collapsed.vue b/components/menu/demo/inline-collapsed.vue
index 60cb34e23..3a144d126 100644
--- a/components/menu/demo/inline-collapsed.vue
+++ b/components/menu/demo/inline-collapsed.vue
@@ -23,62 +23,22 @@ Here is [a complete demo](/components/layout/#components-layout-demo-side) with
 <template>
   <div style="width: 256px">
     <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
-      <MenuUnfoldOutlined v-if="collapsed" />
+      <MenuUnfoldOutlined v-if="state.collapsed" />
       <MenuFoldOutlined v-else />
     </a-button>
     <a-menu
-      v-model:openKeys="openKeys"
-      v-model:selectedKeys="selectedKeys"
+      v-model:openKeys="state.openKeys"
+      v-model:selectedKeys="state.selectedKeys"
       mode="inline"
       theme="dark"
-      :inline-collapsed="collapsed"
-    >
-      <a-menu-item key="1">
-        <template #icon>
-          <PieChartOutlined />
-        </template>
-        <span>Option 1</span>
-      </a-menu-item>
-      <a-menu-item key="2">
-        <template #icon>
-          <DesktopOutlined />
-        </template>
-        <span>Option 2</span>
-      </a-menu-item>
-      <a-menu-item key="3">
-        <template #icon>
-          <InboxOutlined />
-        </template>
-        <span>Option 3</span>
-      </a-menu-item>
-      <a-sub-menu key="sub1">
-        <template #icon>
-          <MailOutlined />
-        </template>
-        <template #title>Navigation One</template>
-        <a-menu-item key="5">Option 5</a-menu-item>
-        <a-menu-item key="6">Option 6</a-menu-item>
-        <a-menu-item key="7">Option 7</a-menu-item>
-        <a-menu-item key="8">Option 8</a-menu-item>
-      </a-sub-menu>
-      <a-sub-menu key="sub2">
-        <template #icon>
-          <AppstoreOutlined />
-        </template>
-        <template #title>Navigation Two</template>
-        <a-menu-item key="9">Option 9</a-menu-item>
-        <a-menu-item key="10">Option 10</a-menu-item>
-        <a-sub-menu key="sub3" title="Submenu">
-          <a-menu-item key="11">Option 11</a-menu-item>
-          <a-menu-item key="12">Option 12</a-menu-item>
-        </a-sub-menu>
-      </a-sub-menu>
-    </a-menu>
+      :inline-collapsed="state.collapsed"
+      :items="items"
+    ></a-menu>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, toRefs, watch } from 'vue';
+<script lang="ts" setup>
+import { reactive, watch, h } from 'vue';
 import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
@@ -88,39 +48,103 @@ import {
   InboxOutlined,
   AppstoreOutlined,
 } from '@ant-design/icons-vue';
-export default defineComponent({
-  components: {
-    MenuFoldOutlined,
-    MenuUnfoldOutlined,
-    PieChartOutlined,
-    MailOutlined,
-    DesktopOutlined,
-    InboxOutlined,
-    AppstoreOutlined,
-  },
-  setup() {
-    const state = reactive({
-      collapsed: false,
-      selectedKeys: ['1'],
-      openKeys: ['sub1'],
-      preOpenKeys: ['sub1'],
-    });
-
-    watch(
-      () => state.openKeys,
-      (_val, oldVal) => {
-        state.preOpenKeys = oldVal;
-      },
-    );
-    const toggleCollapsed = () => {
-      state.collapsed = !state.collapsed;
-      state.openKeys = state.collapsed ? [] : state.preOpenKeys;
-    };
-
-    return {
-      ...toRefs(state),
-      toggleCollapsed,
-    };
-  },
+const state = reactive({
+  collapsed: false,
+  selectedKeys: ['1'],
+  openKeys: ['sub1'],
+  preOpenKeys: ['sub1'],
 });
+const items = reactive([
+  {
+    key: '1',
+    icon: () => h(PieChartOutlined),
+    label: 'Option 1',
+    title: 'Option 1',
+  },
+  {
+    key: '2',
+    icon: () => h(DesktopOutlined),
+    label: 'Option 2',
+    title: 'Option 2',
+  },
+  {
+    key: '3',
+    icon: () => h(InboxOutlined),
+    label: 'Option 3',
+    title: 'Option 3',
+  },
+  {
+    key: 'sub1',
+    icon: () => h(MailOutlined),
+    label: 'Navigation One',
+    title: 'Navigation One',
+    children: [
+      {
+        key: '5',
+        label: 'Option 5',
+        title: 'Option 5',
+      },
+      {
+        key: '6',
+        label: 'Option 6',
+        title: 'Option 6',
+      },
+      {
+        key: '7',
+        label: 'Option 7',
+        title: 'Option 7',
+      },
+      {
+        key: '8',
+        label: 'Option 8',
+        title: 'Option 8',
+      },
+    ],
+  },
+  {
+    key: 'sub2',
+    icon: () => h(AppstoreOutlined),
+    label: 'Navigation Two',
+    title: 'Navigation Two',
+    children: [
+      {
+        key: '9',
+        label: 'Option 9',
+        title: 'Option 9',
+      },
+      {
+        key: '10',
+        label: 'Option 10',
+        title: 'Option 10',
+      },
+      {
+        key: 'sub3',
+        label: 'Submenu',
+        title: 'Submenu',
+        children: [
+          {
+            key: '11',
+            label: 'Option 11',
+            title: 'Option 11',
+          },
+          {
+            key: '12',
+            label: 'Option 12',
+            title: 'Option 12',
+          },
+        ],
+      },
+    ],
+  },
+]);
+watch(
+  () => state.openKeys,
+  (_val, oldVal) => {
+    state.preOpenKeys = oldVal;
+  },
+);
+const toggleCollapsed = () => {
+  state.collapsed = !state.collapsed;
+  state.openKeys = state.collapsed ? [] : state.preOpenKeys;
+};
 </script>
diff --git a/components/menu/demo/inline.vue b/components/menu/demo/inline.vue
index fcfdbb831..8f9908131 100644
--- a/components/menu/demo/inline.vue
+++ b/components/menu/demo/inline.vue
@@ -22,83 +22,66 @@ Vertical menu with inline submenus.
     v-model:selectedKeys="selectedKeys"
     style="width: 256px"
     mode="inline"
+    :items="items"
     @click="handleClick"
-  >
-    <a-sub-menu key="sub1" @titleClick="titleClick">
-      <template #icon>
-        <MailOutlined />
-      </template>
-      <template #title>Navigation One</template>
-      <a-menu-item-group key="g1">
-        <template #icon>
-          <QqOutlined />
-        </template>
-        <template #title>Item 1</template>
-        <a-menu-item key="1">Option 1</a-menu-item>
-        <a-menu-item key="2">Option 2</a-menu-item>
-      </a-menu-item-group>
-      <a-menu-item-group key="g2" title="Item 2">
-        <a-menu-item key="3">Option 3</a-menu-item>
-        <a-menu-item key="4">Option 4</a-menu-item>
-      </a-menu-item-group>
-    </a-sub-menu>
-    <a-sub-menu key="sub2" @titleClick="titleClick">
-      <template #icon>
-        <AppstoreOutlined />
-      </template>
-      <template #title>Navigation Two</template>
-      <a-menu-item key="5">Option 5</a-menu-item>
-      <a-menu-item key="6">Option 6</a-menu-item>
-      <a-sub-menu key="sub3" title="Submenu">
-        <a-menu-item key="7">Option 7</a-menu-item>
-        <a-menu-item key="8">Option 8</a-menu-item>
-      </a-sub-menu>
-    </a-sub-menu>
-    <a-sub-menu key="sub4">
-      <template #icon>
-        <SettingOutlined />
-      </template>
-      <template #title>Navigation Three</template>
-      <a-menu-item key="9">Option 9</a-menu-item>
-      <a-menu-item key="10">Option 10</a-menu-item>
-      <a-menu-item key="11">Option 11</a-menu-item>
-      <a-menu-item key="12">Option 12</a-menu-item>
-    </a-sub-menu>
-  </a-menu>
+  ></a-menu>
 </template>
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
-import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
-import type { MenuProps } from 'ant-design-vue';
-export default defineComponent({
-  components: {
-    MailOutlined,
-    QqOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
-  },
-  setup() {
-    const selectedKeys = ref<string[]>(['1']);
-    const openKeys = ref<string[]>(['sub1']);
-    const handleClick: MenuProps['onClick'] = e => {
-      console.log('click', e);
-    };
-    const titleClick = (e: Event) => {
-      console.log('titleClick', e);
-    };
-    watch(
-      () => openKeys,
-      val => {
-        console.log('openKeys', val);
-      },
-    );
-    return {
-      selectedKeys,
-      openKeys,
+<script lang="ts" setup>
+import { reactive, ref, watch, VueElement, h } from 'vue';
+import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
+import type { MenuProps, ItemType } from 'ant-design-vue';
 
-      handleClick,
-      titleClick,
-    };
+const selectedKeys = ref<string[]>(['1']);
+const openKeys = ref<string[]>(['sub1']);
+
+function getItem(
+  label: VueElement | string,
+  key: string,
+  icon?: any,
+  children?: ItemType[],
+  type?: 'group',
+): ItemType {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as ItemType;
+}
+
+const items: ItemType[] = reactive([
+  getItem('Navigation One', 'sub1', () => h(MailOutlined), [
+    getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
+    getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
+  ]),
+
+  getItem('Navigation Two', 'sub2', () => h(AppstoreOutlined), [
+    getItem('Option 5', '5'),
+    getItem('Option 6', '6'),
+    getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
+  ]),
+
+  { type: 'divider' },
+
+  getItem('Navigation Three', 'sub4', () => h(SettingOutlined), [
+    getItem('Option 9', '9'),
+    getItem('Option 10', '10'),
+    getItem('Option 11', '11'),
+    getItem('Option 12', '12'),
+  ]),
+
+  getItem('Group', 'grp', null, [getItem('Option 13', '13'), getItem('Option 14', '14')], 'group'),
+]);
+
+const handleClick: MenuProps['onClick'] = e => {
+  console.log('click', e);
+};
+
+watch(
+  () => openKeys,
+  val => {
+    console.log('openKeys', val);
   },
-});
+);
 </script>
diff --git a/components/menu/demo/sider-current.vue b/components/menu/demo/sider-current.vue
index 5df9b9758..104930f71 100644
--- a/components/menu/demo/sider-current.vue
+++ b/components/menu/demo/sider-current.vue
@@ -19,75 +19,67 @@ Click the menu and you will see that all the other menus gets collapsed to keep
 <template>
   <div>
     <a-menu
-      v-model:selectedKeys="selectedKeys"
+      v-model:selectedKeys="state.selectedKeys"
       style="width: 256px"
       mode="inline"
-      :open-keys="openKeys"
+      :open-keys="state.openKeys"
+      :items="items"
       @openChange="onOpenChange"
-    >
-      <a-sub-menu key="sub1">
-        <template #icon>
-          <MailOutlined />
-        </template>
-        <template #title>Navigation One</template>
-        <a-menu-item key="1">Option 1</a-menu-item>
-        <a-menu-item key="2">Option 2</a-menu-item>
-        <a-menu-item key="3">Option 3</a-menu-item>
-        <a-menu-item key="4">Option 4</a-menu-item>
-      </a-sub-menu>
-      <a-sub-menu key="sub2">
-        <template #icon></template>
-        <template #title>
-          <AppstoreOutlined />
-          Navigation Two
-        </template>
-        <a-menu-item key="5">Option 5</a-menu-item>
-        <a-menu-item key="6">Option 6</a-menu-item>
-        <a-sub-menu key="sub3" title="Submenu">
-          <a-menu-item key="7">Option 7</a-menu-item>
-          <a-menu-item key="8">Option 8</a-menu-item>
-        </a-sub-menu>
-      </a-sub-menu>
-      <a-sub-menu key="sub4">
-        <template #icon>
-          <SettingOutlined />
-        </template>
-        <template #title>Navigation Three</template>
-        <a-menu-item key="9">Option 9</a-menu-item>
-        <a-menu-item key="10">Option 10</a-menu-item>
-        <a-menu-item key="11">Option 11</a-menu-item>
-        <a-menu-item key="12">Option 12</a-menu-item>
-      </a-sub-menu>
-    </a-menu>
+    ></a-menu>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+import { VueElement, h, reactive } from 'vue';
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
-export default defineComponent({
-  components: {
-    MailOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
-  },
-  setup() {
-    const state = reactive({
-      rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
-      openKeys: ['sub1'],
-      selectedKeys: [],
-    });
-    const onOpenChange = (openKeys: string[]) => {
-      const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
-      if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
-        state.openKeys = openKeys;
-      } else {
-        state.openKeys = latestOpenKey ? [latestOpenKey] : [];
-      }
-    };
-    return {
-      ...toRefs(state),
-      onOpenChange,
-    };
-  },
+import { ItemType } from 'ant-design-vue';
+
+function getItem(
+  label: VueElement | string,
+  key: string,
+  icon?: any,
+  children?: ItemType[],
+  type?: 'group',
+): ItemType {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as ItemType;
+}
+
+const items: ItemType[] = reactive([
+  getItem('Navigation One', 'sub1', h(MailOutlined), [
+    getItem('Option 1', '1'),
+    getItem('Option 2', '2'),
+    getItem('Option 3', '3'),
+    getItem('Option 4', '4'),
+  ]),
+  getItem('Navigation Two', 'sub2', h(AppstoreOutlined), [
+    getItem('Option 5', '5'),
+    getItem('Option 6', '6'),
+    getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
+  ]),
+  getItem('Navigation Three', 'sub4', h(SettingOutlined), [
+    getItem('Option 9', '9'),
+    getItem('Option 10', '10'),
+    getItem('Option 11', '11'),
+    getItem('Option 12', '12'),
+  ]),
+]);
+
+const state = reactive({
+  rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
+  openKeys: ['sub1'],
+  selectedKeys: [],
 });
+const onOpenChange = (openKeys: string[]) => {
+  const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
+  if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
+    state.openKeys = openKeys;
+  } else {
+    state.openKeys = latestOpenKey ? [latestOpenKey] : [];
+  }
+};
 </script>
diff --git a/components/menu/demo/submenu-theme.vue b/components/menu/demo/submenu-theme.vue
new file mode 100644
index 000000000..fedca46f1
--- /dev/null
+++ b/components/menu/demo/submenu-theme.vue
@@ -0,0 +1,84 @@
+<docs>
+---
+order: 2
+title:
+  zh-CN: 子菜单主题
+  en-US: SubMenu theme
+---
+
+## zh-CN
+
+你可以通过 `theme` 属性来设置 SubMenu 的主题从而达到不同目录树下不同主题色的效果。该例子默认为根目录深色，子目录浅色效果。
+
+## en-US
+
+You can config SubMenu theme with `theme` prop to enable different theme color effect. This sample is dark for root and light for SubMenu.
+
+</docs>
+
+<template>
+  <div>
+    <a-switch
+      :checked="theme === 'dark'"
+      checked-children="dark"
+      un-checked-children="light"
+      @Change="changeTheme"
+    />
+    <br />
+    <br />
+    <a-menu
+      :style="{ width: '256px' }"
+      :open-keys="openKeys"
+      :selected-keys="selectedKeys"
+      mode="vertical"
+      theme="dark"
+      :items="items"
+      @click="handleClick"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref, VueElement, ComputedRef, h } from 'vue';
+import { MailOutlined } from '@ant-design/icons-vue';
+import type { MenuProps } from 'ant-design-vue';
+
+const selectedKeys = ref<string[]>(['1']);
+const openKeys = ref<string[]>(['sub1']);
+const theme = ref<MenuProps['theme']>('light');
+
+function getItem(
+  label: VueElement | string,
+  key: string,
+  icon?: any,
+  children?: MenuProps['items'],
+  theme?: 'light' | 'dark',
+): MenuProps['items'][number] {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    theme,
+  };
+}
+
+const items: ComputedRef<MenuProps['items']> = computed(() => [
+  getItem(
+    'Navigation One',
+    'sub1',
+    h(MailOutlined),
+    [getItem('Option 1', '1'), getItem('Option 2', '2'), getItem('Option 3', '3')],
+    theme.value,
+  ),
+  getItem('Option 5', '5'),
+  getItem('Option 6', '6'),
+]);
+
+function handleClick(info: any) {
+  console.log('click', info);
+}
+
+function changeTheme(checked: boolean) {
+  theme.value = checked ? 'dark' : 'light';
+}
+</script>
diff --git a/components/menu/demo/switch-mode.vue b/components/menu/demo/switch-mode.vue
index 60f1774b7..392046fb2 100644
--- a/components/menu/demo/switch-mode.vue
+++ b/components/menu/demo/switch-mode.vue
@@ -18,60 +18,25 @@ Show the dynamic switching mode (between `inline` and `vertical`).
 
 <template>
   <div>
-    <a-switch :checked="mode === 'vertical'" @change="changeMode" />
+    <a-switch :checked="state.mode === 'vertical'" @change="changeMode" />
     Change Mode
     <span class="ant-divider" style="margin: 0 1em" />
-    <a-switch :checked="theme === 'dark'" @change="changeTheme" />
+    <a-switch :checked="state.theme === 'dark'" @change="changeTheme" />
     Change Theme
     <br />
     <br />
     <a-menu
-      v-model:openKeys="openKeys"
-      v-model:selectedKeys="selectedKeys"
+      v-model:openKeys="state.openKeys"
+      v-model:selectedKeys="state.selectedKeys"
       style="width: 256px"
-      :mode="mode"
-      :theme="theme"
-    >
-      <a-menu-item key="1">
-        <template #icon>
-          <MailOutlined />
-        </template>
-        Navigation One
-      </a-menu-item>
-      <a-menu-item key="2">
-        <template #icon>
-          <CalendarOutlined />
-        </template>
-        Navigation Two
-      </a-menu-item>
-      <a-sub-menu key="sub1">
-        <template #icon>
-          <AppstoreOutlined />
-        </template>
-        <template #title>Navigation Three</template>
-        <a-menu-item key="3">Option 3</a-menu-item>
-        <a-menu-item key="4">Option 4</a-menu-item>
-        <a-sub-menu key="sub1-2" title="Submenu">
-          <a-menu-item key="5">Option 5</a-menu-item>
-          <a-menu-item key="6">Option 6</a-menu-item>
-        </a-sub-menu>
-      </a-sub-menu>
-      <a-sub-menu key="sub2">
-        <template #icon>
-          <SettingOutlined />
-        </template>
-
-        <template #title>Navigation Four</template>
-        <a-menu-item key="7">Option 7</a-menu-item>
-        <a-menu-item key="8">Option 8</a-menu-item>
-        <a-menu-item key="9">Option 9</a-menu-item>
-        <a-menu-item key="10">Option 10</a-menu-item>
-      </a-sub-menu>
-    </a-menu>
+      :mode="state.mode"
+      :items="items"
+      :theme="state.theme"
+    ></a-menu>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+import { h, reactive } from 'vue';
 import {
   MailOutlined,
   CalendarOutlined,
@@ -79,31 +44,52 @@ import {
   SettingOutlined,
 } from '@ant-design/icons-vue';
 import type { MenuMode, MenuTheme } from 'ant-design-vue';
-export default defineComponent({
-  components: {
-    MailOutlined,
-    CalendarOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
-  },
-  setup() {
-    const state = reactive({
-      mode: 'inline' as MenuMode,
-      theme: 'light' as MenuTheme,
-      selectedKeys: ['1'],
-      openKeys: ['sub1'],
-    });
-    const changeMode = (checked: boolean) => {
-      state.mode = checked ? 'vertical' : 'inline';
-    };
-    const changeTheme = (checked: boolean) => {
-      state.theme = checked ? 'dark' : 'light';
-    };
-    return {
-      ...toRefs(state),
-      changeMode,
-      changeTheme,
-    };
-  },
+import { ItemType } from 'ant-design-vue';
+
+const state = reactive({
+  mode: 'inline' as MenuMode,
+  theme: 'light' as MenuTheme,
+  selectedKeys: ['1'],
+  openKeys: ['sub1'],
 });
+
+function getItem(
+  label: string,
+  key: string,
+  icon?: any,
+  children?: ItemType[],
+  type?: 'group',
+): ItemType {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as ItemType;
+}
+
+const items: ItemType[] = reactive([
+  getItem('Navigation One', '1', h(MailOutlined)),
+  getItem('Navigation Two', '2', h(CalendarOutlined)),
+  getItem('Navigation Two', 'sub1', h(AppstoreOutlined), [
+    getItem('Option 3', '3'),
+    getItem('Option 4', '4'),
+    getItem('Submenu', 'sub1-2', null, [getItem('Option 5', '5'), getItem('Option 6', '6')]),
+  ]),
+  getItem('Navigation Three', 'sub2', h(SettingOutlined), [
+    getItem('Option 7', '7'),
+    getItem('Option 8', '8'),
+    getItem('Option 9', '9'),
+    getItem('Option 10', '10'),
+  ]),
+]);
+
+const changeMode = (checked: boolean) => {
+  state.mode = checked ? 'vertical' : 'inline';
+};
+
+const changeTheme = (checked: boolean) => {
+  state.theme = checked ? 'dark' : 'light';
+};
 </script>
diff --git a/components/menu/demo/template.vue b/components/menu/demo/template.vue
deleted file mode 100644
index 354ea04db..000000000
--- a/components/menu/demo/template.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<docs>
----
-order: 99
-title:
-  zh-CN: 单文件递归菜单
-  en-US: Single file recursive menu
----
-
-## zh-CN
-使用单文件方式递归生成菜单。
-
-## en-US
-Use the single file method to recursively generate menus.
-
-</docs>
-
-<template>
-  <div style="width: 256px">
-    <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
-      <MenuUnfoldOutlined v-if="collapsed" />
-      <MenuFoldOutlined v-else />
-    </a-button>
-    <a-menu
-      v-model:openKeys="openKeys"
-      v-model:selectedKeys="selectedKeys"
-      mode="inline"
-      theme="dark"
-      :inline-collapsed="collapsed"
-    >
-      <template v-for="item in list" :key="item.key">
-        <template v-if="!item.children">
-          <a-menu-item :key="item.key">
-            <template #icon>
-              <PieChartOutlined />
-            </template>
-            {{ item.title }}
-          </a-menu-item>
-        </template>
-        <template v-else>
-          <sub-menu :key="item.key" :menu-info="item" />
-        </template>
-      </template>
-    </a-menu>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, ref, PropType } from 'vue';
-import {
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
-  PieChartOutlined,
-  MailOutlined,
-} from '@ant-design/icons-vue';
-const list = [
-  {
-    key: '1',
-    title: 'Option 1',
-  },
-  {
-    key: '2',
-    title: 'Navigation 2',
-    children: [
-      {
-        key: '2.1',
-        title: 'Navigation 3',
-        children: [{ key: '2.1.1', title: 'Option 2.1.1' }],
-      },
-    ],
-  },
-];
-// you can rewrite it to a single file component, if not, you should config vue alias to vue/dist/vue.esm-bundler.js
-const SubMenu = defineComponent({
-  name: 'SubMenu',
-  components: {
-    PieChartOutlined,
-    MailOutlined,
-  },
-  props: {
-    menuInfo: {
-      type: Object as PropType<(typeof list)[number]>,
-      default: () => ({} as (typeof list)[number]),
-    },
-  },
-  template: `
-    <a-sub-menu :key="menuInfo.key">
-      <template #icon><MailOutlined /></template>
-      <template #title>{{ menuInfo.title }}</template>
-      <template v-for="item in menuInfo.children" :key="item.key">
-        <template v-if="!item.children">
-          <a-menu-item :key="item.key">
-            <template #icon>
-              <PieChartOutlined />
-            </template>
-            {{ item.title }}
-          </a-menu-item>
-        </template>
-        <template v-else>
-          <sub-menu :menu-info="item" :key="item.key" />
-        </template>
-      </template>
-    </a-sub-menu>
-  `,
-});
-
-export default defineComponent({
-  components: {
-    'sub-menu': SubMenu,
-    MenuFoldOutlined,
-    MenuUnfoldOutlined,
-    PieChartOutlined,
-  },
-  setup() {
-    const collapsed = ref<boolean>(false);
-
-    const toggleCollapsed = () => {
-      collapsed.value = !collapsed.value;
-    };
-    return {
-      list,
-      collapsed,
-      toggleCollapsed,
-      selectedKeys: ref(['1']),
-      openKeys: ref(['2']),
-    };
-  },
-});
-</script>
diff --git a/components/menu/demo/theme.vue b/components/menu/demo/theme.vue
index 14e1a40d0..156059a6b 100644
--- a/components/menu/demo/theme.vue
+++ b/components/menu/demo/theme.vue
@@ -32,46 +32,12 @@ There are two built-in themes: `light` and `dark`. The default value is `light`.
       style="width: 256px"
       mode="inline"
       :theme="theme"
-    >
-      <a-menu-item key="1">
-        <template #icon>
-          <MailOutlined />
-        </template>
-        Navigation One
-      </a-menu-item>
-      <a-menu-item key="2">
-        <template #icon>
-          <CalendarOutlined />
-        </template>
-        Navigation Two
-      </a-menu-item>
-      <a-sub-menu key="sub1">
-        <template #icon>
-          <AppstoreOutlined />
-        </template>
-        <template #title>Navigation Three</template>
-        <a-menu-item key="3">Option 3</a-menu-item>
-        <a-menu-item key="4">Option 4</a-menu-item>
-        <a-sub-menu key="sub1-2" title="Submenu">
-          <a-menu-item key="5">Option 5</a-menu-item>
-          <a-menu-item key="6">Option 6</a-menu-item>
-        </a-sub-menu>
-      </a-sub-menu>
-      <a-sub-menu key="sub2">
-        <template #icon>
-          <SettingOutlined />
-        </template>
-        <template #title>Navigation Four</template>
-        <a-menu-item key="7">Option 7</a-menu-item>
-        <a-menu-item key="8">Option 8</a-menu-item>
-        <a-menu-item key="9">Option 9</a-menu-item>
-        <a-menu-item key="10">Option 10</a-menu-item>
-      </a-sub-menu>
-    </a-menu>
+      :items="items"
+    />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+import { h, ref } from 'vue';
 import {
   MailOutlined,
   CalendarOutlined,
@@ -79,27 +45,87 @@ import {
   SettingOutlined,
 } from '@ant-design/icons-vue';
 import type { MenuTheme } from 'ant-design-vue';
-export default defineComponent({
-  components: {
-    MailOutlined,
-    CalendarOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
+const theme = ref<MenuTheme>('dark');
+const selectedKeys = ref(['1']);
+const openKeys = ref(['sub1']);
+const items = ref([
+  {
+    key: '1',
+    icon: () => h(MailOutlined),
+    label: 'Navigation One',
+    title: 'Navigation One',
   },
-  setup() {
-    const state = reactive({
-      theme: 'dark' as MenuTheme,
-      selectedKeys: ['1'],
-      openKeys: ['sub1'],
-    });
-    const changeTheme = (checked: boolean) => {
-      state.theme = checked ? 'dark' : 'light';
-    };
-
-    return {
-      ...toRefs(state),
-      changeTheme,
-    };
+  {
+    key: '2',
+    icon: () => h(CalendarOutlined),
+    label: 'Navigation Two',
+    title: 'Navigation Two',
   },
-});
+  {
+    key: 'sub1',
+    icon: () => h(AppstoreOutlined),
+    label: 'Navigation Three',
+    title: 'Navigation Three',
+    children: [
+      {
+        key: '3',
+        label: 'Option 3',
+        title: 'Option 3',
+      },
+      {
+        key: '4',
+        label: 'Option 4',
+        title: 'Option 4',
+      },
+      {
+        key: 'sub1-2',
+        label: 'Submenu',
+        title: 'Submenu',
+        children: [
+          {
+            key: '5',
+            label: 'Option 5',
+            title: 'Option 5',
+          },
+          {
+            key: '6',
+            label: 'Option 6',
+            title: 'Option 6',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: 'sub2',
+    icon: () => h(SettingOutlined),
+    label: 'Navigation Four',
+    title: 'Navigation Four',
+    children: [
+      {
+        key: '7',
+        label: 'Option 7',
+        title: 'Option 7',
+      },
+      {
+        key: '8',
+        label: 'Option 8',
+        title: 'Option 8',
+      },
+      {
+        key: '9',
+        label: 'Option 9',
+        title: 'Option 9',
+      },
+      {
+        key: '10',
+        label: 'Option 10',
+        title: 'Option 10',
+      },
+    ],
+  },
+]);
+const changeTheme = (checked: boolean) => {
+  theme.value = checked ? 'dark' : 'light';
+};
 </script>
diff --git a/components/menu/demo/vertical.vue b/components/menu/demo/vertical.vue
index 6fd2ffa2e..ed84b5cdb 100644
--- a/components/menu/demo/vertical.vue
+++ b/components/menu/demo/vertical.vue
@@ -22,46 +22,12 @@ Submenus open as pop-ups.
     v-model:selectedKeys="selectedKeys"
     style="width: 256px"
     mode="vertical"
+    :items="items"
     @click="handleClick"
-  >
-    <a-menu-item key="1">
-      <template #icon>
-        <MailOutlined />
-      </template>
-      Navigation One
-    </a-menu-item>
-    <a-menu-item key="2">
-      <template #icon>
-        <CalendarOutlined />
-      </template>
-      Navigation Two
-    </a-menu-item>
-    <a-sub-menu key="sub1">
-      <template #icon>
-        <AppstoreOutlined />
-      </template>
-      <template #title>Navigation Three</template>
-      <a-menu-item key="3">Option 3</a-menu-item>
-      <a-menu-item key="4">Option 4</a-menu-item>
-      <a-sub-menu key="sub1-2" title="Submenu">
-        <a-menu-item key="5">Option 5</a-menu-item>
-        <a-menu-item key="6">Option 6</a-menu-item>
-      </a-sub-menu>
-    </a-sub-menu>
-    <a-sub-menu key="sub2">
-      <template #icon>
-        <SettingOutlined />
-      </template>
-      <template #title>Navigation Four</template>
-      <a-menu-item key="7">Option 7</a-menu-item>
-      <a-menu-item key="8">Option 8</a-menu-item>
-      <a-menu-item key="9">Option 9</a-menu-item>
-      <a-menu-item key="10">Option 10</a-menu-item>
-    </a-sub-menu>
-  </a-menu>
+  />
 </template>
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+import { h, ref } from 'vue';
 import {
   MailOutlined,
   CalendarOutlined,
@@ -70,25 +36,86 @@ import {
 } from '@ant-design/icons-vue';
 import type { MenuProps } from 'ant-design-vue';
 
-export default defineComponent({
-  components: {
-    MailOutlined,
-    CalendarOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
+const selectedKeys = ref([]);
+const openKeys = ref([]);
+const items = ref([
+  {
+    key: '1',
+    icon: () => h(MailOutlined),
+    label: 'Navigation One',
+    title: 'Navigation One',
   },
-  setup() {
-    const state = reactive({
-      selectedKeys: [],
-      openKeys: [],
-    });
-    const handleClick: MenuProps['onClick'] = menuInfo => {
-      console.log('click ', menuInfo);
-    };
-    return {
-      ...toRefs(state),
-      handleClick,
-    };
+  {
+    key: '2',
+    icon: () => h(CalendarOutlined),
+    label: 'Navigation Two',
+    title: 'Navigation Two',
   },
-});
+  {
+    key: 'sub1',
+    icon: () => h(AppstoreOutlined),
+    label: 'Navigation Three',
+    title: 'Navigation Three',
+    children: [
+      {
+        key: '3',
+        label: 'Option 3',
+        title: 'Option 3',
+      },
+      {
+        key: '4',
+        label: 'Option 4',
+        title: 'Option 4',
+      },
+      {
+        key: 'sub1-2',
+        label: 'Submenu',
+        title: 'Submenu',
+        children: [
+          {
+            key: '5',
+            label: 'Option 5',
+            title: 'Option 5',
+          },
+          {
+            key: '6',
+            label: 'Option 6',
+            title: 'Option 6',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: 'sub2',
+    icon: () => h(SettingOutlined),
+    label: 'Navigation Four',
+    title: 'Navigation Four',
+    children: [
+      {
+        key: '7',
+        label: 'Option 7',
+        title: 'Option 7',
+      },
+      {
+        key: '8',
+        label: 'Option 8',
+        title: 'Option 8',
+      },
+      {
+        key: '9',
+        label: 'Option 9',
+        title: 'Option 9',
+      },
+      {
+        key: '10',
+        label: 'Option 10',
+        title: 'Option 10',
+      },
+    ],
+  },
+]);
+const handleClick: MenuProps['onClick'] = menuInfo => {
+  console.log('click ', menuInfo);
+};
 </script>
diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md
index e7ad10072..19bde2312 100644
--- a/components/menu/index.en-US.md
+++ b/components/menu/index.en-US.md
@@ -37,10 +37,11 @@ More layouts with navigation: [Layout](/components/layout).
 ### Menu
 
 | Param | Description | Type | Default value |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | forceSubMenuRender | render submenu into DOM before it shows | boolean | false |
 | inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - |
 | inlineIndent | indent px of inline menu item on each level | number | 24 |
+| items | Menu item content | [ItemType\[\]](#ItemType) | - | 4.20.0 |
 | mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | `vertical` \| `horizontal` \| `inline` | `vertical` |
 | multiple | Allow selection of multiple items | boolean | false |
 | openKeys(v-model) | array with the keys of currently opened sub menus | string\[] |  |
@@ -70,6 +71,67 @@ More layouts with navigation: [Layout](/components/layout).
 | key      | unique id of the menu item           | string         |               |
 | title    | set display title for collapsed item | string \| slot |               |
 
+### ItemType
+
+> type ItemType = [MenuItemType](#MenuItemType) | [SubMenuType](#SubMenuType) | [MenuItemGroupType](#MenuItemGroupType) | [MenuDividerType](#MenuDividerType);
+
+#### MenuItemType
+
+| Param    | Description                          | Type    | Default value | Version |
+| -------- | ------------------------------------ | ------- | ------------- | ------- |
+| danger   | Display the danger style             | boolean | false         |         |
+| disabled | Whether menu item is disabled        | boolean | false         |         |
+| icon     | The icon of the menu item            | VueNode | -             |         |
+| key      | Unique ID of the menu item           | string  | -             |         |
+| label    | Menu label                           | VueNode | -             |         |
+| title    | Set display title for collapsed item | string  | -             |         |
+
+#### SubMenuType
+
+<!-- prettier-ignore -->
+| Property | Description | Type | Default value | Version |
+| --- | --- | --- | --- | --- |
+| children | Sub-menus or sub-menu items | [ItemType\[\]](#ItemType) | - |  |
+| disabled | Whether sub-menu is disabled | boolean | false |  |
+| icon | Icon of sub menu | VueNode\|()=>VueNode | - |  |
+| key | Unique ID of the sub-menu | string | - |  |
+| label | Menu label | VueNode | - |  |
+| popupClassName | Sub-menu class name, not working when `mode="inline"` | string | - |  |
+| popupOffset | Sub-menu offset, not working when `mode="inline"` | \[number, number] | - |  |
+| theme | Color theme of the SubMenu (inherits from Menu by default) |  | `light` \| `dark` | - |  |
+| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - |  |
+
+#### MenuItemGroupType
+
+Define `type` as `group` to make as group:
+
+```ts
+const groupItem = {
+  type: 'group', // Must have
+  label: 'My Group',
+  children: [],
+};
+```
+
+| Param    | Description            | Type                              | Default value | Version |
+| -------- | ---------------------- | --------------------------------- | ------------- | ------- |
+| children | Sub-menu items         | [MenuItemType\[\]](#MenuItemType) | -             |         |
+| label    | The title of the group | ReactNode                         | -             |         |
+
+#### MenuDividerType
+
+Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu. Need define the `type` as `divider`：
+
+```ts
+const dividerItem = {
+  type: 'divider', // Must have
+};
+```
+
+| Param  | Description            | Type    | Default value | Version |
+| ------ | ---------------------- | ------- | ------------- | ------- |
+| dashed | Whether line is dashed | boolean | false         |         |
+
 ### Menu.SubMenu
 
 | Param | Description | Type | Default value | Version |
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index a3d992e76..ce3e3e0cf 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -10,6 +10,7 @@ import Divider from './src/Divider';
 import type { MenuDividerProps } from './src/Divider';
 import type { App, Plugin } from 'vue';
 import type { MenuTheme, MenuMode } from './src/interface';
+import type { ItemType } from './src/hooks/useItems';
 /* istanbul ignore next */
 Menu.install = function (app: App) {
   app.component(Menu.name, Menu);
@@ -32,6 +33,7 @@ export type {
   MenuTheme,
   MenuMode,
   MenuDividerProps,
+  ItemType,
 };
 export {
   SubMenu,
diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md
index ba80bf607..394138964 100644
--- a/components/menu/index.zh-CN.md
+++ b/components/menu/index.zh-CN.md
@@ -38,10 +38,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAA
 ### Menu
 
 | 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |
 | inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |
 | inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
+| items | 菜单内容 | [ItemType\[\]](#ItemType) | - |  |
 | mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` |
 | multiple | 是否允许多选 | boolean | false |
 | openKeys(v-model) | 当前展开的 SubMenu 菜单项 key 数组 | string\[] |  |
@@ -71,6 +72,66 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAA
 | key      | item 的唯一标志          | string         |        |       |
 | title    | 设置收缩时展示的悬浮标题 | string \| slot |        |       |
 
+### ItemType
+
+> type ItemType = [MenuItemType](#MenuItemType) | [SubMenuType](#SubMenuType) | [MenuItemGroupType](#MenuItemGroupType) | [MenuDividerType](#MenuDividerType);
+
+### MenuItemType
+
+| 参数     | 说明                     | 类型                 | 默认值 | 版本 |
+| -------- | ------------------------ | -------------------- | ------ | ---- |
+| danger   | 展示错误状态样式         | boolean              | false  |      |
+| disabled | 是否禁用                 | boolean              | false  |      |
+| icon     | 菜单图标                 | VueNode\|()=>VueNode | -      |      |
+| key      | item 的唯一标志          | string               | -      |      |
+| label    | 菜单项标题               | VueNode              | -      |      |
+| title    | 设置收缩时展示的悬浮标题 | string               | -      |      |
+
+#### SubMenuType
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| children | 子菜单的菜单项 | [ItemType\[\]](#ItemType) | - |  |
+| disabled | 是否禁用 | boolean | false |  |
+| icon | 菜单图标 | VueNode\|()=>VueNode | - |  |
+| key | 唯一标志 | string | - |  |
+| label | 菜单项标题 | VueNode | - |  |
+| popupClassName | 子菜单样式，`mode="inline"` 时无效 | string | - |  |
+| popupOffset | 子菜单偏移量，`mode="inline"` 时无效 | \[number, number] | - |  |
+| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - |  |
+| theme | 设置子菜单的主题，默认从 Menu 上继承 | `light` \| `dark` | - |  |
+
+#### MenuItemGroupType
+
+定义类型为 `group` 时，会作为分组处理:
+
+```ts
+const groupItem = {
+  type: 'group', // Must have
+  label: 'My Group',
+  children: [],
+};
+```
+
+| 参数     | 说明         | 类型                              | 默认值 | 版本 |
+| -------- | ------------ | --------------------------------- | ------ | ---- |
+| children | 分组的菜单项 | [MenuItemType\[\]](#MenuItemType) | -      |      |
+| label    | 分组标题     | ReactNode                         | -      |      |
+
+#### MenuDividerType
+
+菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
+
+```ts
+const dividerItem = {
+  type: 'divider', // Must have
+};
+```
+
+| 参数   | 说明     | 类型    | 默认值 | 版本 |
+| ------ | -------- | ------- | ------ | ---- |
+| dashed | 是否虚线 | boolean | false  |      |
+
 ### Menu.SubMenu
 
 | 参数           | 说明                                 | 类型              | 默认值   | 版本  |
diff --git a/components/menu/src/MenuItem.tsx b/components/menu/src/MenuItem.tsx
index a5406d140..1c459683a 100644
--- a/components/menu/src/MenuItem.tsx
+++ b/components/menu/src/MenuItem.tsx
@@ -248,7 +248,7 @@ export default defineComponent({
             title={typeof title === 'string' ? title : undefined}
           >
             {cloneElement(
-              icon,
+              typeof icon === 'function' ? icon() : icon,
               {
                 class: `${prefixCls.value}-item-icon`,
               },
diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx
index e5764242d..b9bae5b87 100644
--- a/components/menu/src/SubMenu.tsx
+++ b/components/menu/src/SubMenu.tsx
@@ -224,7 +224,7 @@ export default defineComponent({
       return (
         <>
           {cloneElement(
-            icon,
+            typeof icon === 'function' ? icon() : icon,
             {
               class: `${prefixCls.value}-item-icon`,
             },