From 74c7d207c1cf6dc01d9b972bd315defe7868172f Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Mon, 17 Jul 2023 10:13:22 +0800
Subject: [PATCH] refactor: menu component token (#43576)

* docs: update examples link

* refacor: menu component token

* chore: update demo

* chore: update test case

* fix: token

* chore: fix

* Apply suggestions from code review

Signed-off-by: MadCcc <1075746765@qq.com>

* chore: fix lint

* refactor: more token

---------

Signed-off-by: MadCcc <1075746765@qq.com>
---
 .dumi/theme/slots/Sidebar/index.tsx           |    4 +-
 components/layout/__tests__/token.test.tsx    |    2 -
 .../__snapshots__/demo-extend.test.ts.snap    | 1401 +++++++++++++----
 .../__snapshots__/demo.test.tsx.snap          |  492 ++++--
 components/menu/demo/component-token.tsx      |   97 +-
 components/menu/style/horizontal.tsx          |    8 +-
 components/menu/style/index.tsx               |  273 +++-
 components/menu/style/theme.tsx               |    8 +-
 components/menu/style/vertical.tsx            |   28 +-
 docs/blog/extract-ssr.en-US.md                |    2 +-
 docs/blog/extract-ssr.zh-CN.md                |    2 +-
 docs/react/migrate-less-variables.en-US.md    |   42 +-
 docs/react/migrate-less-variables.zh-CN.md    |   40 +-
 13 files changed, 1922 insertions(+), 477 deletions(-)

diff --git a/.dumi/theme/slots/Sidebar/index.tsx b/.dumi/theme/slots/Sidebar/index.tsx
index 3a6fb7c367..22c5e78cb8 100644
--- a/.dumi/theme/slots/Sidebar/index.tsx
+++ b/.dumi/theme/slots/Sidebar/index.tsx
@@ -134,7 +134,9 @@ const Sidebar: React.FC = () => {
   } = useSiteToken();
 
   const menuChild = (
-    <ConfigProvider theme={{ components: { Menu: { itemBg: colorBgContainer } } }}>
+    <ConfigProvider
+      theme={{ components: { Menu: { itemBg: colorBgContainer, darkItemBg: colorBgContainer } } }}
+    >
       <Menu
         items={menuItems}
         inlineIndent={30}
diff --git a/components/layout/__tests__/token.test.tsx b/components/layout/__tests__/token.test.tsx
index b663aa6cde..bce722042e 100644
--- a/components/layout/__tests__/token.test.tsx
+++ b/components/layout/__tests__/token.test.tsx
@@ -24,7 +24,6 @@ describe('Layout.Token', () => {
       >
         <Header>
           <Menu
-            theme="dark"
             mode="horizontal"
             defaultSelectedKeys={['2']}
             items={new Array(15).fill(null).map((_, index) => {
@@ -62,7 +61,6 @@ describe('Layout.Token', () => {
       >
         <Header>
           <Menu
-            theme="dark"
             mode="horizontal"
             defaultSelectedKeys={['2']}
             items={new Array(15).fill(null).map((_, index) => {
diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
index ae3cec84dc..f8ad1bf508 100644
--- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,131 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/menu/demo/component-token.tsx extend context correctly 1`] = `
-Array [
-  <ul
-    class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
-    data-menu-list="true"
-    role="menu"
-    tabindex="0"
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
   >
-    <li
-      class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected"
-      data-menu-id="rc-menu-uuid-test-mail"
-      role="menuitem"
-      style="opacity: 1; order: 0;"
-      tabindex="-1"
-    >
-      <span
-        aria-label="mail"
-        class="anticon anticon-mail ant-menu-item-icon"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="mail"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <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"
-          />
-        </svg>
-      </span>
-      <span
-        class="ant-menu-title-content"
-      >
-        Navigation One
-      </span>
-    </li>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        />
-      </div>
-    </div>
-    <li
-      aria-disabled="true"
-      class="ant-menu-overflow-item ant-menu-item ant-menu-item-disabled"
-      role="menuitem"
-      style="opacity: 1; order: 1;"
-    >
-      <span
-        aria-label="appstore"
-        class="anticon anticon-appstore ant-menu-item-icon"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="appstore"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <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"
-          />
-        </svg>
-      </span>
-      <span
-        class="ant-menu-title-content"
-      >
-        Navigation Two
-      </span>
-    </li>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        />
-      </div>
-    </div>
-    <li
-      class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal"
-      role="none"
-      style="opacity: 1; order: 2;"
-    >
-      <div
-        aria-controls="rc-menu-uuid-test-SubMenu-popup"
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-menu-submenu-title"
+    <ul
+      class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
+      data-menu-list="true"
+      role="menu"
+      tabindex="0"
+    >
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected"
+        data-menu-id="rc-menu-uuid-test-mail"
         role="menuitem"
+        style="opacity: 1; order: 0;"
         tabindex="-1"
       >
         <span
-          aria-label="setting"
-          class="anticon anticon-setting ant-menu-item-icon"
+          aria-label="mail"
+          class="anticon anticon-mail ant-menu-item-icon"
           role="img"
         >
           <svg
             aria-hidden="true"
-            data-icon="setting"
+            data-icon="mail"
             fill="currentColor"
             focusable="false"
             height="1em"
@@ -133,78 +36,47 @@ Array [
             width="1em"
           >
             <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"
+              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"
             />
           </svg>
         </span>
         <span
           class="ant-menu-title-content"
         >
-          Navigation Three - Submenu
+          Navigation One
         </span>
-        <i
-          class="ant-menu-submenu-arrow"
-        />
-      </div>
-    </li>
-    <li
-      class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
-      role="menuitem"
-      style="opacity: 1; order: 3;"
-      tabindex="-1"
-    >
-      <span
-        class="ant-menu-title-content"
-      >
-        <a
-          href="https://ant.design"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Navigation Four - Link
-        </a>
-      </span>
-    </li>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
+      </li>
       <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
         />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
       </div>
-    </div>
-    <li
-      aria-hidden="true"
-      class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"
-      role="none"
-      style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;"
-    >
-      <div
-        aria-controls="rc-menu-uuid-test-rc-menu-more-popup"
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-menu-submenu-title"
-        data-menu-id="rc-menu-uuid-test-rc-menu-more"
+      <li
+        aria-disabled="true"
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-disabled"
         role="menuitem"
-        tabindex="-1"
+        style="opacity: 1; order: 1;"
       >
         <span
-          aria-label="ellipsis"
-          class="anticon anticon-ellipsis"
+          aria-label="appstore"
+          class="anticon anticon-appstore ant-menu-item-icon"
           role="img"
         >
           <svg
             aria-hidden="true"
-            data-icon="ellipsis"
+            data-icon="appstore"
             fill="currentColor"
             focusable="false"
             height="1em"
@@ -212,152 +84,1151 @@ Array [
             width="1em"
           >
             <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              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"
             />
           </svg>
         </span>
-        <i
-          class="ant-menu-submenu-arrow"
-        />
-      </div>
+        <span
+          class="ant-menu-title-content"
+        >
+          Navigation Two
+        </span>
+      </li>
       <div
-        class="ant-menu-submenu ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-bottomLeft"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
         style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
-        <ul
-          class="ant-menu ant-menu-sub ant-menu-vertical"
-          data-menu-list="true"
-          id="rc-menu-uuid-test-rc-menu-more-popup"
-          role="menu"
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
         />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
       </div>
-    </li>
-  </ul>,
-  <div
-    aria-hidden="true"
-    style="display: none;"
-  >
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
+      <li
+        class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal"
+        role="none"
+        style="opacity: 1; order: 2;"
+      >
+        <div
+          aria-controls="rc-menu-uuid-test-SubMenu-popup"
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            aria-label="setting"
+            class="anticon anticon-setting ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="setting"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <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"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation Three - Submenu
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity: 1; order: 3;"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          <a
+            href="https://ant.design"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Navigation Four - Link
+          </a>
+        </span>
+      </li>
       <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
         />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      <li
+        aria-hidden="true"
+        class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"
+        role="none"
+        style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;"
+      >
+        <div
+          aria-controls="rc-menu-uuid-test-rc-menu-more-popup"
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          data-menu-id="rc-menu-uuid-test-rc-menu-more"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <div
+          class="ant-menu-submenu ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-bottomLeft"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <ul
+            class="ant-menu ant-menu-sub ant-menu-vertical"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-rc-menu-more-popup"
+            role="menu"
+          />
+        </div>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display: none;"
+    >
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <ul
+      class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
+      data-menu-list="true"
+      role="menu"
+      style="width: 256px;"
+      tabindex="0"
+    >
+      <li
+        class="ant-menu-item ant-menu-item-selected"
+        data-menu-id="rc-menu-uuid-test-1"
+        role="menuitem"
+        style="padding-left: 24px;"
+        tabindex="-1"
+      >
+        <span
+          aria-label="pie-chart"
+          class="anticon anticon-pie-chart ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="pie-chart"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 1
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <li
+        class="ant-menu-item"
+        data-menu-id="rc-menu-uuid-test-2"
+        role="menuitem"
+        style="padding-left: 24px;"
+        tabindex="-1"
+      >
+        <span
+          aria-label="desktop"
+          class="anticon anticon-desktop ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="desktop"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 2
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <li
+        class="ant-menu-item"
+        data-menu-id="rc-menu-uuid-test-3"
+        role="menuitem"
+        style="padding-left: 24px;"
+        tabindex="-1"
+      >
+        <span
+          aria-label="container"
+          class="anticon anticon-container ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="container"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 3
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
+        role="none"
+      >
+        <div
+          aria-controls="rc-menu-uuid-test-sub1-popup"
+          aria-expanded="true"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          data-menu-id="rc-menu-uuid-test-sub1"
+          role="menuitem"
+          style="padding-left: 24px;"
+          tabindex="-1"
+        >
+          <span
+            aria-label="mail"
+            class="anticon anticon-mail ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="mail"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <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"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation One
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <div
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <ul
+            class="ant-menu ant-menu-sub ant-menu-inline"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-sub1-popup"
+            role="menu"
+          >
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-5"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 5
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-6"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 6
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-7"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 7
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-8"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 8
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+          </ul>
+        </div>
+        <ul
+          class="ant-menu ant-menu-sub ant-menu-inline"
+          data-menu-list="true"
+          id="rc-menu-uuid-test-sub1-popup"
+          role="menu"
+        >
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-5"
+            role="menuitem"
+            style="padding-left: 48px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 5
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; top: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-6"
+            role="menuitem"
+            style="padding-left: 48px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 6
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; top: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-7"
+            role="menuitem"
+            style="padding-left: 48px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 7
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; top: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-8"
+            role="menuitem"
+            style="padding-left: 48px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 8
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; top: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </ul>
+      </li>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-inline"
+        role="none"
+      >
+        <div
+          aria-controls="rc-menu-uuid-test-sub2-popup"
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          data-menu-id="rc-menu-uuid-test-sub2"
+          role="menuitem"
+          style="padding-left: 24px;"
+          tabindex="-1"
+        >
+          <span
+            aria-label="appstore"
+            class="anticon anticon-appstore ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="appstore"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <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"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation Two
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <div
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <ul
+            class="ant-menu ant-menu-sub ant-menu-inline"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-sub2-popup"
+            role="menu"
+          >
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-9"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 9
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-10"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 10
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-submenu ant-menu-submenu-inline"
+              role="none"
+            >
+              <div
+                aria-controls="rc-menu-uuid-test-sub3-popup"
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="ant-menu-submenu-title"
+                data-menu-id="rc-menu-uuid-test-sub3"
+                role="menuitem"
+                style="padding-left: 48px;"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-menu-title-content"
+                >
+                  Submenu
+                </span>
+                <i
+                  class="ant-menu-submenu-arrow"
+                />
+              </div>
+              <div
+                class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+              >
+                <ul
+                  class="ant-menu ant-menu-sub ant-menu-inline"
+                  data-menu-list="true"
+                  id="rc-menu-uuid-test-sub3-popup"
+                  role="menu"
+                >
+                  <li
+                    class="ant-menu-item ant-menu-item-only-child"
+                    data-menu-id="rc-menu-uuid-test-11"
+                    role="menuitem"
+                    style="padding-left: 72px;"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="ant-menu-title-content"
+                    >
+                      Option 11
+                    </span>
+                  </li>
+                  <div
+                    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                  >
+                    <div
+                      class="ant-tooltip-arrow"
+                      style="position: absolute; top: 0px; left: 0px;"
+                    />
+                    <div
+                      class="ant-tooltip-content"
+                    >
+                      <div
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
+                    </div>
+                  </div>
+                  <li
+                    class="ant-menu-item ant-menu-item-only-child"
+                    data-menu-id="rc-menu-uuid-test-12"
+                    role="menuitem"
+                    style="padding-left: 72px;"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="ant-menu-title-content"
+                    >
+                      Option 12
+                    </span>
+                  </li>
+                  <div
+                    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                  >
+                    <div
+                      class="ant-tooltip-arrow"
+                      style="position: absolute; top: 0px; left: 0px;"
+                    />
+                    <div
+                      class="ant-tooltip-content"
+                    >
+                      <div
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
+                    </div>
+                  </div>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display: none;"
     >
       <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
-      <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
         />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
       <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
       <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
         />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
       <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
       <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
         />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
       <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
       <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
         />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
       <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
       <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
         />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
       <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; top: 0px; left: 0px;"
-      />
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
       <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
         />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
       </div>
     </div>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`renders components/menu/demo/horizontal.tsx extend context correctly 1`] = `
diff --git a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap
index 8903e9c195..2c76bdf8d0 100644
--- a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1,95 +1,207 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/menu/demo/component-token.tsx correctly 1`] = `
-Array [
-  <ul
-    class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
-    data-menu-list="true"
-    role="menu"
-    tabindex="0"
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
   >
-    <li
-      class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected"
-      role="menuitem"
-      style="opacity:1;order:0"
-      tabindex="-1"
+    <ul
+      class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
+      data-menu-list="true"
+      role="menu"
+      tabindex="0"
     >
-      <span
-        aria-label="mail"
-        class="anticon anticon-mail ant-menu-item-icon"
-        role="img"
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected"
+        role="menuitem"
+        style="opacity:1;order:0"
+        tabindex="-1"
       >
-        <svg
-          aria-hidden="true"
-          data-icon="mail"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="mail"
+          class="anticon anticon-mail ant-menu-item-icon"
+          role="img"
         >
-          <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"
-          />
-        </svg>
-      </span>
-      <span
-        class="ant-menu-title-content"
-      >
-        Navigation One
-      </span>
-    </li>
-    <li
-      aria-disabled="true"
-      class="ant-menu-overflow-item ant-menu-item ant-menu-item-disabled"
-      role="menuitem"
-      style="opacity:1;order:1"
-    >
-      <span
-        aria-label="appstore"
-        class="anticon anticon-appstore ant-menu-item-icon"
-        role="img"
+          <svg
+            aria-hidden="true"
+            data-icon="mail"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Navigation One
+        </span>
+      </li>
+      <li
+        aria-disabled="true"
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-disabled"
+        role="menuitem"
+        style="opacity:1;order:1"
       >
-        <svg
-          aria-hidden="true"
-          data-icon="appstore"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="appstore"
+          class="anticon anticon-appstore ant-menu-item-icon"
+          role="img"
         >
-          <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"
+          <svg
+            aria-hidden="true"
+            data-icon="appstore"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <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"
+            />
+          </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"
+        role="none"
+        style="opacity:1;order:2"
+      >
+        <div
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            aria-label="setting"
+            class="anticon anticon-setting ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="setting"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <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"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation Three - Submenu
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
           />
-        </svg>
-      </span>
-      <span
-        class="ant-menu-title-content"
+        </div>
+      </li>
+      <li
+        class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+        role="menuitem"
+        style="opacity:1;order:3"
+        tabindex="-1"
       >
-        Navigation Two
-      </span>
-    </li>
-    <li
-      class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal"
-      role="none"
-      style="opacity:1;order:2"
+        <span
+          class="ant-menu-title-content"
+        >
+          <a
+            href="https://ant.design"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Navigation Four - Link
+          </a>
+        </span>
+      </li>
+      <li
+        aria-hidden="true"
+        class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"
+        role="none"
+        style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
+      >
+        <div
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display:none"
+    />
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <ul
+      class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
+      data-menu-list="true"
+      role="menu"
+      style="width:256px"
+      tabindex="0"
     >
-      <div
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-menu-submenu-title"
+      <li
+        class="ant-menu-item ant-menu-item-selected"
         role="menuitem"
+        style="padding-left:24px"
         tabindex="-1"
       >
         <span
-          aria-label="setting"
-          class="anticon anticon-setting ant-menu-item-icon"
+          aria-label="pie-chart"
+          class="anticon anticon-pie-chart ant-menu-item-icon"
           role="img"
         >
           <svg
             aria-hidden="true"
-            data-icon="setting"
+            data-icon="pie-chart"
             fill="currentColor"
             focusable="false"
             height="1em"
@@ -97,59 +209,61 @@ Array [
             width="1em"
           >
             <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"
+              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"
             />
           </svg>
         </span>
         <span
           class="ant-menu-title-content"
         >
-          Navigation Three - Submenu
+          Option 1
         </span>
-        <i
-          class="ant-menu-submenu-arrow"
-        />
-      </div>
-    </li>
-    <li
-      class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
-      role="menuitem"
-      style="opacity:1;order:3"
-      tabindex="-1"
-    >
-      <span
-        class="ant-menu-title-content"
+      </li>
+      <li
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px"
+        tabindex="-1"
       >
-        <a
-          href="https://ant.design"
-          rel="noopener noreferrer"
-          target="_blank"
+        <span
+          aria-label="desktop"
+          class="anticon anticon-desktop ant-menu-item-icon"
+          role="img"
         >
-          Navigation Four - Link
-        </a>
-      </span>
-    </li>
-    <li
-      aria-hidden="true"
-      class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"
-      role="none"
-      style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-menu-submenu-title"
+          <svg
+            aria-hidden="true"
+            data-icon="desktop"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <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"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 2
+        </span>
+      </li>
+      <li
+        class="ant-menu-item"
         role="menuitem"
+        style="padding-left:24px"
         tabindex="-1"
       >
         <span
-          aria-label="ellipsis"
-          class="anticon anticon-ellipsis"
+          aria-label="container"
+          class="anticon anticon-container ant-menu-item-icon"
           role="img"
         >
           <svg
             aria-hidden="true"
-            data-icon="ellipsis"
+            data-icon="container"
             fill="currentColor"
             focusable="false"
             height="1em"
@@ -157,21 +271,159 @@ Array [
             width="1em"
           >
             <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
             />
           </svg>
         </span>
-        <i
-          class="ant-menu-submenu-arrow"
-        />
-      </div>
-    </li>
-  </ul>,
-  <div
-    aria-hidden="true"
-    style="display:none"
-  />,
-]
+        <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"
+      >
+        <div
+          aria-expanded="true"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          role="menuitem"
+          style="padding-left:24px"
+          tabindex="-1"
+        >
+          <span
+            aria-label="mail"
+            class="anticon anticon-mail ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="mail"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <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"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation One
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <ul
+          class="ant-menu ant-menu-sub ant-menu-inline"
+          data-menu-list="true"
+          role="menu"
+        >
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            role="menuitem"
+            style="padding-left:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 5
+            </span>
+          </li>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            role="menuitem"
+            style="padding-left:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 6
+            </span>
+          </li>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            role="menuitem"
+            style="padding-left:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 7
+            </span>
+          </li>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            role="menuitem"
+            style="padding-left:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 8
+            </span>
+          </li>
+        </ul>
+      </li>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-inline"
+        role="none"
+      >
+        <div
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          role="menuitem"
+          style="padding-left:24px"
+          tabindex="-1"
+        >
+          <span
+            aria-label="appstore"
+            class="anticon anticon-appstore ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="appstore"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <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"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation Two
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display:none"
+    />
+  </div>
+</div>
 `;
 
 exports[`renders components/menu/demo/horizontal.tsx correctly 1`] = `
diff --git a/components/menu/demo/component-token.tsx b/components/menu/demo/component-token.tsx
index 8380edfd75..d887b8ea18 100644
--- a/components/menu/demo/component-token.tsx
+++ b/components/menu/demo/component-token.tsx
@@ -1,8 +1,17 @@
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  AppstoreOutlined,
+  ContainerOutlined,
+  DesktopOutlined,
+  MailOutlined,
+  PieChartOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { ConfigProvider, Menu } from 'antd';
+import { ConfigProvider, Menu, Space } from 'antd';
 import React, { useState } from 'react';
 
+type MenuItem = Required<MenuProps>['items'][number];
+
 const items: MenuProps['items'] = [
   {
     label: 'Navigation One',
@@ -60,6 +69,42 @@ const items: MenuProps['items'] = [
   },
 ];
 
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+  type?: 'group',
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as MenuItem;
+}
+
+const items2: MenuProps['items'] = [
+  getItem('Option 1', '1', <PieChartOutlined />),
+  getItem('Option 2', '2', <DesktopOutlined />),
+  getItem('Option 3', '3', <ContainerOutlined />),
+
+  getItem('Navigation One', 'sub1', <MailOutlined />, [
+    getItem('Option 5', '5'),
+    getItem('Option 6', '6'),
+    getItem('Option 7', '7'),
+    getItem('Option 8', '8'),
+  ]),
+
+  getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
+    getItem('Option 9', '9'),
+    getItem('Option 10', '10'),
+
+    getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
+  ]),
+];
+
 const App: React.FC = () => {
   const [current, setCurrent] = useState('mail');
 
@@ -69,18 +114,44 @@ const App: React.FC = () => {
   };
 
   return (
-    <ConfigProvider
-      theme={{
-        components: {
-          Menu: {
-            horizontalItemBorderRadius: 6,
-            horizontalItemHoverBg: '#f5f5f5',
+    <Space direction="vertical">
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              horizontalItemBorderRadius: 6,
+              horizontalItemHoverBg: '#f5f5f5',
+            },
+          },
+        }}
+      >
+        <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
+      </ConfigProvider>
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              darkItemColor: '#91daff',
+              darkItemBg: '#d48806',
+              darkSubMenuItemBg: '#faad14',
+              darkItemSelectedColor: '#ffccc7',
+              darkItemSelectedBg: '#52c41a',
+            },
           },
-        },
-      }}
-    >
-      <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
-    </ConfigProvider>
+        }}
+      >
+        <Menu
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          mode='inline'
+          theme='dark'
+          items={items2}
+          style={{
+            width: 256,
+          }}
+        />
+      </ConfigProvider>
+    </Space>
   );
 };
 
diff --git a/components/menu/style/horizontal.tsx b/components/menu/style/horizontal.tsx
index fad8ffd721..ba5e099655 100644
--- a/components/menu/style/horizontal.tsx
+++ b/components/menu/style/horizontal.tsx
@@ -5,16 +5,16 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
   const {
     componentCls,
     motionDurationSlow,
-    menuHorizontalHeight,
+    horizontalLineHeight,
     colorSplit,
     lineWidth,
     lineType,
-    menuItemPaddingInline,
+    itemPaddingInline,
   } = token;
 
   return {
     [`${componentCls}-horizontal`]: {
-      lineHeight: `${menuHorizontalHeight}px`,
+      lineHeight: horizontalLineHeight,
       border: 0,
       borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
       boxShadow: 'none',
@@ -31,7 +31,7 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
         position: 'relative',
         display: 'inline-block',
         verticalAlign: 'bottom',
-        paddingInline: menuItemPaddingInline,
+        paddingInline: itemPaddingInline,
       },
 
       [`> ${componentCls}-item:hover,
diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx
index aa90bea75c..4854e3a3f9 100644
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@@ -1,5 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
+import type { CSSProperties } from 'react';
 import { clearFix, resetComponent, resetIcon } from '../../style';
 import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal';
@@ -30,6 +31,16 @@ export interface ComponentToken {
    * @descEN Color of group title text
    */
   groupTitleColor: string;
+  /**
+   * @desc 分组标题文字高度
+   * @descEN line-height of group title
+   */
+  groupTitleLineHeight: CSSProperties['lineHeight'];
+  /**
+   * @desc 分组标题文字大小
+   * @descEN font-size of group title
+   */
+  groupTitleFontSize: number;
 
   // radius
   /** @deprecated Use `itemBorderRadius` instead */
@@ -229,12 +240,127 @@ export interface ComponentToken {
    * @descEN Border radius of horizontal menu item
    */
   horizontalItemBorderRadius: number;
+  /**
+   * @desc 菜单项高度
+   * @descEN Height of menu item
+   */
+  itemHeight: number;
+  /**
+   * @desc 收起后的宽度
+   * @descEN Width when collapsed
+   */
+  collapsedWidth: number;
+  /**
+   * @desc 弹出框背景色
+   * @descEN Background color of popup
+   */
+  popupBg: string;
+  /**
+   * @desc 菜单项纵向外间距
+   * @descEN margin-block of menu item
+   */
+  itemMarginBlock: CSSProperties['marginBlock'];
+  /**
+   * @desc 菜单项横向内间距
+   * @descEN padding-inline of menu item
+   */
+  itemPaddingInline: CSSProperties['paddingInline'];
+  /**
+   * @desc 横向菜单行高
+   * @descEN LineHeight of horizontal menu item
+   */
+  horizontalLineHeight: CSSProperties['lineHeight'];
+  /**
+   * @desc 图标与文字间距
+   * @descEN Spacing between icon and text
+   */
+  iconMarginInlineEnd: CSSProperties['marginInlineEnd'];
+  /**
+   * @desc 图标尺寸
+   * @descEN Size of icon
+   */
+  iconSize: number;
+  /**
+   * @desc 收起时图标尺寸
+   * @descEN Size of icon when collapsed
+   */
+  collapsedIconSize: number;
+
+  // Dark
+  /**
+   * @desc 暗色模式下的菜单项文字颜色
+   * @descEN Color of menu item text in dark mode
+   */
+  darkItemColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项文字颜色
+   * @descEN Color of danger menu item text in dark mode
+   */
+  darkDangerItemColor: string;
+  /**
+   * @desc 暗色模式下的菜单项背景
+   * @descEN Background of menu item in dark mode
+   */
+  darkItemBg: string;
+  /**
+   * @desc 暗色模式下的子菜单项背景
+   * @descEN Background of submenu item in dark mode
+   */
+  darkSubMenuItemBg: string;
+  /**
+   * @desc 暗色模式下的菜单项选中颜色
+   * @descEN Color of selected menu item in dark mode
+   */
+  darkItemSelectedColor: string;
+  /**
+   * @desc 暗色模式下的菜单项选中背景
+   * @descEN Background of active menu item in dark mode
+   */
+  darkItemSelectedBg: string;
+  /**
+   * @desc 暗色模式下的菜单项悬浮背景
+   * @descEN Background of hovered menu item in dark mode
+   */
+  darkItemHoverBg: string;
+  /**
+   * @desc 暗色模式下的分组标题文字颜色
+   * @descEN Color of group title text in dark mode
+   */
+  darkGroupTitleColor: string;
+  /**
+   * @desc 暗色模式下的菜单项悬浮颜色
+   * @descEN Color of hovered menu item in dark mode
+   */
+  darkItemHoverColor: string;
+  /**
+   * @desc 暗色模式下的菜单项禁用颜色
+   * @descEN Color of disabled menu item in dark mode
+   */
+  darkItemDisabledColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项选中背景
+   * @descEN Background of active danger menu item in dark mode
+   */
+  darkDangerItemSelectedBg: string;
+  /**
+   * @desc 暗色模式下的危险菜单项悬浮文字背景
+   * @descEN Background of hovered danger menu item in dark mode
+   */
+  darkDangerItemHoverColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项选中文字颜色
+   * @descEN Color of selected danger menu item in dark mode
+   */
+  darkDangerItemSelectedColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项激活态背景
+   * @descEN Background of active danger menu item in dark mode
+   */
+  darkDangerItemActiveBg: string;
 }
 
 export interface MenuToken extends FullToken<'Menu'> {
-  menuItemHeight: number;
   menuHorizontalHeight: number;
-  menuItemPaddingInline: number;
   menuArrowSize: number;
   menuArrowOffset: string;
   menuPanelMaskInset: number;
@@ -244,13 +370,13 @@ export interface MenuToken extends FullToken<'Menu'> {
 const genMenuItemStyle = (token: MenuToken): CSSObject => {
   const {
     componentCls,
-    fontSize,
     motionDurationSlow,
     motionDurationMid,
     motionEaseInOut,
     motionEaseOut,
     iconCls,
-    controlHeightSM,
+    iconSize,
+    iconMarginInlineEnd,
   } = token;
 
   return {
@@ -268,8 +394,8 @@ const genMenuItemStyle = (token: MenuToken): CSSObject => {
       ].join(','),
 
       [`${componentCls}-item-icon, ${iconCls}`]: {
-        minWidth: fontSize,
-        fontSize,
+        minWidth: iconSize,
+        fontSize: iconSize,
         transition: [
           `font-size ${motionDurationMid} ${motionEaseOut}`,
           `margin ${motionDurationSlow} ${motionEaseInOut}`,
@@ -277,7 +403,7 @@ const genMenuItemStyle = (token: MenuToken): CSSObject => {
         ].join(','),
 
         '+ span': {
-          marginInlineStart: controlHeightSM - fontSize,
+          marginInlineStart: iconMarginInlineEnd,
           opacity: 1,
           transition: [
             `opacity ${motionDurationSlow} ${motionEaseInOut}`,
@@ -379,7 +505,6 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
     motionDurationSlow,
     motionDurationMid,
     motionEaseInOut,
-    lineHeight,
     paddingXS,
     padding,
     colorSplit,
@@ -391,6 +516,8 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
     menuArrowOffset,
     lineType,
     menuPanelMaskInset,
+    groupTitleLineHeight,
+    groupTitleFontSize,
   } = token;
 
   return [
@@ -444,8 +571,8 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
 
         [`${componentCls}-item-group-title`]: {
           padding: `${paddingXS}px ${padding}px`,
-          fontSize,
-          lineHeight,
+          fontSize: groupTitleFontSize,
+          lineHeight: groupTitleLineHeight,
           transition: `all ${motionDurationSlow}`,
         },
 
@@ -666,7 +793,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
 export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResult => {
   const useOriginHook = genComponentStyleHook(
     'Menu',
-    (token, { overrideComponentToken }) => {
+    (token) => {
       // Dropdown will handle menu style self. We do not need to handle this.
       if (injectStyle === false) {
         return [];
@@ -675,19 +802,29 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
       const {
         colorBgElevated,
         colorPrimary,
-        colorError,
-        colorErrorHover,
         colorTextLightSolid,
         controlHeightLG,
         fontSize,
+        darkItemColor,
+        darkDangerItemColor,
+        darkItemBg,
+        darkSubMenuItemBg,
+        darkItemSelectedColor,
+        darkItemSelectedBg,
+        darkDangerItemSelectedBg,
+        darkItemHoverBg,
+        darkGroupTitleColor,
+        darkItemHoverColor,
+        darkItemDisabledColor,
+        darkDangerItemHoverColor,
+        darkDangerItemSelectedColor,
+        darkDangerItemActiveBg,
       } = token;
 
       const menuArrowSize = (fontSize / 7) * 5;
 
       // Menu Token
       const menuToken = mergeToken<MenuToken>(token, {
-        menuItemHeight: controlHeightLG,
-        menuItemPaddingInline: token.margin,
         menuArrowSize,
         menuHorizontalHeight: controlHeightLG * 1.15,
         menuArrowOffset: `${menuArrowSize * 0.25}px`,
@@ -695,43 +832,36 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         menuSubMenuBg: colorBgElevated,
       });
 
-      const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString();
+      const menuDarkToken = mergeToken<MenuToken>(menuToken, {
+        itemColor: darkItemColor,
+        itemHoverColor: darkItemHoverColor,
+        groupTitleColor: darkGroupTitleColor,
+        itemSelectedColor: darkItemSelectedColor,
+        itemBg: darkItemBg,
+        popupBg: darkItemBg,
+        subMenuItemBg: darkSubMenuItemBg,
+        itemActiveBg: 'transparent',
+        itemSelectedBg: darkItemSelectedBg,
+        activeBarHeight: 0,
+        activeBarBorderWidth: 0,
+        itemHoverBg: darkItemHoverBg,
 
-      const menuDarkToken = mergeToken<MenuToken>(
-        menuToken,
-        {
-          itemColor: colorTextDark,
-          itemHoverColor: colorTextLightSolid,
-          groupTitleColor: colorTextDark,
-          itemSelectedColor: colorTextLightSolid,
-          itemBg: '#001529',
-          subMenuItemBg: '#000c17',
-          itemActiveBg: 'transparent',
-          itemSelectedBg: colorPrimary,
-          activeBarWidth: 0,
-          activeBarHeight: 0,
-          activeBarBorderWidth: 0,
-
-          // Disabled
-          itemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
-
-          // Danger
-          dangerItemColor: colorError,
-          dangerItemHoverColor: colorErrorHover,
-          dangerItemSelectedColor: colorTextLightSolid,
-          dangerItemActiveBg: colorError,
-          dangerItemSelectedBg: colorError,
-
-          menuSubMenuBg: '#001529',
-
-          // Horizontal
-          horizontalItemSelectedColor: colorTextLightSolid,
-          horizontalItemSelectedBg: colorPrimary,
-        },
-        {
-          ...overrideComponentToken,
-        },
-      );
+        // Disabled
+        itemDisabledColor: darkItemDisabledColor,
+
+        // Danger
+        dangerItemColor: darkDangerItemColor,
+        dangerItemHoverColor: darkDangerItemHoverColor,
+        dangerItemSelectedColor: darkDangerItemSelectedColor,
+        dangerItemActiveBg: darkDangerItemActiveBg,
+        dangerItemSelectedBg: darkDangerItemSelectedBg,
+
+        menuSubMenuBg: darkSubMenuItemBg,
+
+        // Horizontal
+        horizontalItemSelectedColor: colorTextLightSolid,
+        horizontalItemSelectedBg: colorPrimary,
+      });
 
       return [
         // Basic
@@ -773,8 +903,20 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         lineWidthBold,
         controlItemBgActive,
         colorBgTextHover,
+        controlHeightLG,
+        lineHeight,
+        colorBgElevated,
+        marginXXS,
+        padding,
+        fontSize,
+        controlHeightSM,
+        fontSizeLG,
+        colorTextLightSolid,
+        colorErrorHover,
       } = token;
 
+      const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString();
+
       return {
         dropdownWidth: 160,
         zIndexPopup: token.zIndexPopupBase + 50,
@@ -833,6 +975,35 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
 
         horizontalItemBorderRadius: 0,
         horizontalItemHoverBg: 'transparent',
+        itemHeight: controlHeightLG,
+        groupTitleLineHeight: lineHeight,
+        collapsedWidth: controlHeightLG * 2,
+        popupBg: colorBgElevated,
+        itemMarginBlock: marginXXS,
+        itemPaddingInline: padding,
+        horizontalLineHeight: `${controlHeightLG * 1.15}px`,
+        iconSize: fontSize,
+        iconMarginInlineEnd: controlHeightSM - fontSize,
+        collapsedIconSize: fontSizeLG,
+        groupTitleFontSize: fontSize,
+
+        // Disabled
+        darkItemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
+
+        // Dark
+        darkItemColor: colorTextDark,
+        darkDangerItemColor: colorError,
+        darkItemBg: '#001529',
+        darkSubMenuItemBg: '#000c17',
+        darkItemSelectedColor: colorTextLightSolid,
+        darkItemSelectedBg: colorPrimary,
+        darkDangerItemSelectedBg: colorError,
+        darkItemHoverBg: 'transparent',
+        darkGroupTitleColor: colorTextDark,
+        darkItemHoverColor: colorTextLightSolid,
+        darkDangerItemHoverColor: colorErrorHover,
+        darkDangerItemSelectedColor: colorTextLightSolid,
+        darkDangerItemActiveBg: colorError,
       };
     },
     {
diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx
index b169d904eb..5be20ef0f1 100644
--- a/components/menu/style/theme.tsx
+++ b/components/menu/style/theme.tsx
@@ -21,7 +21,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     motionDurationSlow,
     motionEaseInOut,
     motionEaseOut,
-    menuItemPaddingInline,
+    itemPaddingInline,
     motionDurationMid,
     itemHoverColor,
     lineType,
@@ -45,6 +45,8 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     horizontalItemSelectedBg,
     horizontalItemBorderRadius,
     horizontalItemHoverBg,
+
+    popupBg,
   } = token;
 
   return {
@@ -155,7 +157,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
       },
 
       [`&${componentCls}-popup > ${componentCls}`]: {
-        backgroundColor: itemBg,
+        backgroundColor: popupBg,
       },
 
       // ====================== Horizontal ======================
@@ -174,7 +176,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
 
           '&::after': {
             position: 'absolute',
-            insetInline: menuItemPaddingInline,
+            insetInline: itemPaddingInline,
             bottom: 0,
             borderBottom: `${activeBarHeight}px solid transparent`,
             transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`,
diff --git a/components/menu/style/vertical.tsx b/components/menu/style/vertical.tsx
index e8c73dfab6..a1cfb30dc0 100644
--- a/components/menu/style/vertical.tsx
+++ b/components/menu/style/vertical.tsx
@@ -6,12 +6,12 @@ import type { GenerateStyle } from '../../theme/internal';
 const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
   const {
     componentCls,
-    menuItemHeight,
+    itemHeight,
     itemMarginInline,
     padding,
     menuArrowSize,
     marginXS,
-    marginXXS,
+    itemMarginBlock,
   } = token;
 
   const paddingWithArrow = padding + menuArrowSize + marginXS;
@@ -23,20 +23,20 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
     },
 
     [`${componentCls}-item, ${componentCls}-submenu-title`]: {
-      height: menuItemHeight,
-      lineHeight: `${menuItemHeight}px`,
+      height: itemHeight,
+      lineHeight: `${itemHeight}px`,
       paddingInline: padding,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       marginInline: itemMarginInline,
-      marginBlock: marginXXS,
+      marginBlock: itemMarginBlock,
       width: `calc(100% - ${itemMarginInline * 2}px)`,
     },
 
     [`> ${componentCls}-item,
             > ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
-      height: menuItemHeight,
-      lineHeight: `${menuItemHeight}px`,
+      height: itemHeight,
+      lineHeight: `${itemHeight}px`,
     },
 
     [`${componentCls}-item-group-list ${componentCls}-submenu-title,
@@ -50,7 +50,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
   const {
     componentCls,
     iconCls,
-    menuItemHeight,
+    itemHeight,
     colorTextLightSolid,
     dropdownWidth,
     controlHeightLG,
@@ -62,11 +62,13 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
     motionDurationSlow,
     paddingXS,
     boxShadowSecondary,
+    collapsedWidth,
+    collapsedIconSize,
   } = token;
 
   const inlineItemStyle: CSSObject = {
-    height: menuItemHeight,
-    lineHeight: `${menuItemHeight}px`,
+    height: itemHeight,
+    lineHeight: `${itemHeight}px`,
     listStylePosition: 'inside',
     listStyleType: 'disc',
   };
@@ -160,7 +162,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
     // Inline Collapse Only
     {
       [`${componentCls}-inline-collapsed`]: {
-        width: menuItemHeight * 2,
+        width: collapsedWidth,
 
         [`&${componentCls}-root`]: {
           [`${componentCls}-item, ${componentCls}-submenu ${componentCls}-submenu-title`]: {
@@ -188,8 +190,8 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
 
           [`${componentCls}-item-icon, ${iconCls}`]: {
             margin: 0,
-            fontSize: fontSizeLG,
-            lineHeight: `${menuItemHeight}px`,
+            fontSize: collapsedIconSize,
+            lineHeight: `${itemHeight}px`,
 
             '+ span': {
               display: 'inline-block',
diff --git a/docs/blog/extract-ssr.en-US.md b/docs/blog/extract-ssr.en-US.md
index c3076ee616..a53ff5f6c7 100644
--- a/docs/blog/extract-ssr.en-US.md
+++ b/docs/blog/extract-ssr.en-US.md
@@ -139,7 +139,7 @@ if (!fs.existsSync(cssFileName)) {
 Then add the corresponding CSS file on the HTML template side:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <link rel="stylesheet" href="${hashCssFileUrl}" />
diff --git a/docs/blog/extract-ssr.zh-CN.md b/docs/blog/extract-ssr.zh-CN.md
index c9dcaa1725..f4e8cd5b1a 100644
--- a/docs/blog/extract-ssr.zh-CN.md
+++ b/docs/blog/extract-ssr.zh-CN.md
@@ -139,7 +139,7 @@ if (!fs.existsSync(cssFileName)) {
 然后在 HTML 模板侧添加对应的 CSS 文件：
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <link rel="stylesheet" href="${hashCssFileUrl}" />
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
index c964b52973..bf6b9f93bd 100644
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@@ -240,12 +240,50 @@ export default App;
 ### Mentions
 
 <!-- prettier-ignore -->
-| less 变量 | Component Token | Note |
+| Less variables | Component Token | Note |
 | --- | --- | --- |
 | `@mentions-dropdown-bg` | `colorBgElevated` | GlobalToken |
 | `@mentions-dropdown-menu-item-hover-bg` | - | Deprecated |
 
-<!-- ### Menu -->
+### Menu
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@menu-inline-toplevel-item-height` | `itemHeight` | Same as `@menu-item-height` |
+| `@menu-item-height` | `itemHeight` | - |
+| `@menu-item-group-height` | `groupTitleLineHeight` | - |
+| `@menu-collapsed-width` | `collapsedWidth` | - |
+| `@menu-bg` | `itemBg` | - |
+| `@menu-popup-bg` | `popupBg` | - |
+| `@menu-item-color` | `itemColor` | - |
+| `@menu-inline-submenu-bg` | `subMenuItemBg` | - |
+| `@menu-highlight-color` | `itemSelectedColor` | - |
+| `@menu-highlight-danger-color` | `dangerItemSelectedColor` | - |
+| `@menu-item-active-bg` | `itemActiveBg` | - |
+| `@menu-item-active-danger-bg` | `dangerItemActiveBg` | - |
+| `@menu-item-active-border-width` | `activeBarBorderWidth` | - |
+| `@menu-item-group-title-color` | `groupTitleColor` | - |
+| `@menu-item-vertical-margin` | `itemMarginBlock` | - |
+| `@menu-item-font-size` | `fontSize` | Global Token |
+| `@menu-item-boundary-margin` | - | Deprecated in favor of new style, use `itemMarginBlock` instead |
+| `@menu-item-padding-horizontal` | `itemPaddingInline` | - |
+| `@menu-item-padding` | - | Depreacated, use `itemPaddingInline` and `itemHeight` instead |
+| `@menu-horizontal-line-height` | `horizontalLineHeight` | - |
+| `@menu-icon-margin-right` | `iconMarginInlineEnd` | - |
+| `@menu-icon-size` | `iconSize` | - |
+| `@menu-icon-size-lg` | `horizontalLineHeight` | - |
+| `@menu-dark-color` | `darkItemColor` | - |
+| `@menu-dark-danger-color` | `darkDangerItemColor` | - |
+| `@menu-dark-bg` | `darkItemBg` | - |
+| `@menu-dark-arrow-color` | - | Deprecated, and same as text color |
+| `@menu-dark-inline-submenu-bg` | `darkSubMenuItemBg` | - |
+| `@menu-dark-highlight-color` | `darkItemSelectedColor` | - |
+| `@menu-dark-item-active-bg` | `darkItemSelectedBg` | - |
+| `@menu-dark-item-active-danger-bg` | `darkDangerItemSelectedBg` | - |
+| `@menu-dark-selected-item-icon-color` | - | Deprecated, same as `darkItemSelectedColor` |
+| `@menu-dark-selected-item-text-color` | - | Deprecated, same as `darkItemSelectedColor` |
+| `@menu-dark-item-hover-bg` | `darkItemHoverBg` | - |
 
 ### Message
 
diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
index a95f0f65f7..b4573085de 100644
--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@@ -243,7 +243,45 @@ Mentions 提及
 | `@mentions-dropdown-bg` | `colorBgElevated` | - |
 | `@mentions-dropdown-menu-item-hover-bg` | - | 已废弃 |
 
-<!-- ### Menu 导航菜单 -->
+### Menu 导航菜单
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@menu-inline-toplevel-item-height` | `itemHeight` | 同 `@menu-item-height` |
+| `@menu-item-height` | `itemHeight` | - |
+| `@menu-item-group-height` | `groupTitleLineHeight` | - |
+| `@menu-collapsed-width` | `collapsedWidth` | - |
+| `@menu-bg` | `itemBg` | - |
+| `@menu-popup-bg` | `popupBg` | - |
+| `@menu-item-color` | `itemColor` | - |
+| `@menu-inline-submenu-bg` | `subMenuItemBg` | - |
+| `@menu-highlight-color` | `itemSelectedColor` | - |
+| `@menu-highlight-danger-color` | `dangerItemSelectedColor` | - |
+| `@menu-item-active-bg` | `itemActiveBg` | - |
+| `@menu-item-active-danger-bg` | `dangerItemActiveBg` | - |
+| `@menu-item-active-border-width` | `activeBarBorderWidth` | - |
+| `@menu-item-group-title-color` | `groupTitleColor` | - |
+| `@menu-item-vertical-margin` | `itemMarginBlock` | - |
+| `@menu-item-font-size` | `fontSize` | 全局 Token |
+| `@menu-item-boundary-margin` | - | 因样式调整已废弃，可使用 `itemMarginBlock` 替代 |
+| `@menu-item-padding-horizontal` | `itemPaddingInline` | - |
+| `@menu-item-padding` | - | 已废弃，使用 `itemPaddingInline` 和 `itemHeight` 替代 |
+| `@menu-horizontal-line-height` | `horizontalLineHeight` | - |
+| `@menu-icon-margin-right` | `iconMarginInlineEnd` | - |
+| `@menu-icon-size` | `iconSize` | - |
+| `@menu-icon-size-lg` | `horizontalLineHeight` | - |
+| `@menu-dark-color` | `darkItemColor` | - |
+| `@menu-dark-danger-color` | `darkDangerItemColor` | - |
+| `@menu-dark-bg` | `darkItemBg` | - |
+| `@menu-dark-arrow-color` | - | 已废弃，和文字颜色相同 |
+| `@menu-dark-inline-submenu-bg` | `darkSubMenuItemBg` | - |
+| `@menu-dark-highlight-color` | `darkItemSelectedColor` | - |
+| `@menu-dark-item-active-bg` | `darkItemSelectedBg` | - |
+| `@menu-dark-item-active-danger-bg` | `darkDangerItemSelectedBg` | - |
+| `@menu-dark-selected-item-icon-color` | - | 已废弃，同 `darkItemSelectedColor` |
+| `@menu-dark-selected-item-text-color` | - | 已废弃，同 `darkItemSelectedColor` |
+| `@menu-dark-item-hover-bg` | `darkItemHoverBg` | - |
 
 ### Message 全局提示