feat: v5 menu style (#38009)

* feat: v5 menu style * chore: code clean * feat: more component token * docs: add v4 demo * test: fix lint * docs: update docs
2024-11-24 11:10:01 +08:00 · 2022-10-18 17:04:06 +08:00 · 2022-10-18 17:04:06 +08:00 · ba5a7b8d1b
commit ba5a7b8d1b
parent 6a562e63b9
7 changed files with 1531 additions and 27 deletions
--- a/components/menu/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/menu/tests/snapshots/demo-extend.test.ts.snap
--- a/components/menu/tests/snapshots/demo.test.ts.snap
+++ b/components/menu/tests/snapshots/demo.test.ts.snap
@ -791,6 +791,278 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
 </div>
 `;

+exports[`renders ./components/menu/demo/menu-v4.md correctly 1`] = `
+Array [
+  <button
+    aria-checked="false"
+    class="ant-switch"
+    role="switch"
+    type="button"
+  >
+    <div
+      class="ant-switch-handle"
+    />
+    <span
+      class="ant-switch-inner"
+    >
+      <span
+        class="ant-switch-inner-checked"
+      />
+      <span
+        class="ant-switch-inner-unchecked"
+      />
+    </span>
+  </button>,
+   Change Mode,
+  <br />,
+  <br />,
+  <ul
+    class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
+    data-menu-list="true"
+    role="menu"
+    style="width:256px"
+    tabindex="0"
+  >
+    <li
+      class="ant-menu-item ant-menu-item-selected"
+      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>
+    </li>
+    <li
+      class="ant-menu-item"
+      role="menuitem"
+      style="padding-left:24px"
+      tabindex="-1"
+    >
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar ant-menu-item-icon"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+      <span
+        class="ant-menu-title-content"
+      >
+        Navigation Two
+      </span>
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
+      role="none"
+    >
+      <div
+        aria-expanded="true"
+        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>
+      <ul
+        class="ant-menu ant-menu-sub ant-menu-inline"
+        data-menu-list="true"
+      >
+        <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 3
+          </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 4
+          </span>
+        </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:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Submenu
+            </span>
+            <i
+              class="ant-menu-submenu-arrow"
+            />
+          </div>
+        </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="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
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-item"
+      role="menuitem"
+      style="padding-left:24px"
+      tabindex="-1"
+    >
+      <span
+        aria-label="link"
+        class="anticon anticon-link ant-menu-item-icon"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="link"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
+          />
+        </svg>
+      </span>
+      <span
+        class="ant-menu-title-content"
+      >
+        <a
+          href="https://ant.design"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Ant Design
+        </a>
+      </span>
+    </li>
+  </ul>,
+  <div
+    aria-hidden="true"
+    style="display:none"
+  />,
+]
+`;
+
 exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
 Array [
  <ul
--- a/components/menu/demo/menu-v4.md
+++ b/components/menu/demo/menu-v4.md
@ -0,0 +1,109 @@
+---
+order: 999
+title:
+  zh-CN: v4 版本 Menu
+  en-US: Menu v4
+debug: true
+---
+
+## zh-CN
+
+V4 样式的 Menu 组件。
+
+## en-US
+
+Menu with v4 style.
+
+```tsx
+import {
+  AppstoreOutlined,
+  CalendarOutlined,
+  LinkOutlined,
+  MailOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import { Menu, Switch, ConfigProvider } from 'antd';
+import type { MenuProps } from 'antd/es/menu';
+import React, { useState } from 'react';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getItem(
+  label: React.ReactNode,
+  key?: React.Key | null,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+  } as MenuItem;
+}
+
+const items: MenuItem[] = [
+  getItem('Navigation One', '1', <MailOutlined />),
+  getItem('Navigation Two', '2', <CalendarOutlined />),
+  getItem('Navigation Two', 'sub1', <AppstoreOutlined />, [
+    getItem('Option 3', '3'),
+    getItem('Option 4', '4'),
+    getItem('Submenu', 'sub1-2', null, [getItem('Option 5', '5'), getItem('Option 6', '6')]),
+  ]),
+  getItem('Navigation Three', 'sub2', <SettingOutlined />, [
+    getItem('Option 7', '7'),
+    getItem('Option 8', '8'),
+    getItem('Option 9', '9'),
+    getItem('Option 10', '10'),
+  ]),
+  getItem(
+    <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+      Ant Design
+    </a>,
+    'link',
+    <LinkOutlined />,
+  ),
+];
+
+const App: React.FC = () => {
+  const [mode, setMode] = useState<'vertical' | 'inline'>('inline');
+
+  const changeMode = (value: boolean) => {
+    setMode(value ? 'vertical' : 'inline');
+  };
+
+  return (
+    <>
+      <Switch onChange={changeMode} /> Change Mode
+      <br />
+      <br />
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              radiusItem: 0,
+              radiusSubMenuItem: 0,
+              colorItemTextHover: '#1890ff',
+              colorItemTextSelected: '#1890ff',
+              colorItemBgSelected: '#e6f7ff',
+              colorActiveBarWidth: 3,
+              itemMarginInline: 0,
+              colorItemBgHover: 'transparent',
+            },
+          },
+        }}
+      >
+        <Menu
+          style={{ width: 256 }}
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          mode={mode}
+          items={items}
+        />
+      </ConfigProvider>
+    </>
+  );
+};
+
+export default App;
+```
--- a/components/menu/demo/submenu-theme.md
+++ b/components/menu/demo/submenu-theme.md
@ -74,7 +74,7 @@ const App: React.FC = () => {
      <Menu
        onClick={onClick}
        style={{ width: 256 }}
-        defaultOpenKeys={['sub1']}
+        openKeys={['sub1']}
        selectedKeys={[current]}
        mode="vertical"
        theme="dark"
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@ -18,12 +18,15 @@ export interface ComponentToken {

  // radius
  radiusItem: number;
+  radiusSubMenuItem: number;

  // Item Text
  // > Default
  colorItemText: string;
  colorItemTextHover: string;
+  colorItemTextHoverHorizontal: string;
  colorItemTextSelected: string;
+  colorItemTextSelectedHorizontal: string;

  // > Disabled
  colorItemTextDisabled: string;
@ -37,6 +40,7 @@ export interface ComponentToken {

  // Item Bg
  colorItemBg: string;
+  colorItemBgHover: string;
  colorSubItemBg: string;

  // > Default
@ -48,6 +52,8 @@ export interface ComponentToken {
  colorActiveBarWidth: number;
  colorActiveBarHeight: number;
  colorActiveBarBorderSize: number;
+
+  itemMarginInline: number;
 }

 export interface MenuToken extends FullToken<'Menu'> {
@ -78,6 +84,8 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
    iconCls,
    zIndexPopup,
    radiusBase,
+    radiusLG,
+    radiusSubMenuItem,
    menuArrowSize,
    controlHeightSM,
    menuArrowOffset,
@ -132,7 +140,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
            flex: 'none',
          },
        },
-        [`${componentCls}-item,${componentCls}-submenu,`]: {
+        [`${componentCls}-item, ${componentCls}-submenu`]: {
          borderRadius: token.radiusItem,
        },

@ -279,7 +287,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
            position: 'absolute',
            zIndex: zIndexPopup,
            background: 'transparent',
-            borderRadius: radiusBase,
+            borderRadius: radiusLG,
            boxShadow: 'none',
            transformOrigin: '0 0',

@ -302,7 +310,11 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
          },

          [`> ${componentCls}`]: {
-            borderRadius: radiusBase,
+            borderRadius: radiusLG,
+
+            [`> ${componentCls}-item`]: {
+              borderRadius: radiusSubMenuItem,
+            },

            [`${componentCls}-submenu-title::after`]: {
              transition: `transform ${motionDurationSlow} ${motionEaseInOut}`,
@ -480,25 +492,31 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        colorTextDescription,
        colorBgContainer,
        colorFillAlter,
-        controlItemBgActive,
+        colorFillContent,
        lineWidth,
        lineWidthBold,
+        controlItemBgActiveHover,
+        colorBgTextHover,
      } = token;

      return {
        dropdownWidth: 160,
        zIndexPopup: token.zIndexPopupBase + 50,
-        radiusItem: 0,
+        radiusItem: token.radiusLG,
+        radiusSubMenuItem: token.radiusSM,
        colorItemText: colorText,
-        colorItemTextHover: colorPrimary,
+        colorItemTextHover: colorText,
+        colorItemTextHoverHorizontal: colorPrimary,
        colorGroupTitle: colorTextDescription,
-        colorItemTextSelected: colorPrimary,
+        colorItemTextSelected: colorText,
+        colorItemTextSelectedHorizontal: colorPrimary,
        colorItemBg: colorBgContainer,
+        colorItemBgHover: colorBgTextHover,
+        colorItemBgActive: colorFillContent,
        colorSubItemBg: colorFillAlter,
-        colorItemBgActive: controlItemBgActive,
-        colorItemBgSelected: controlItemBgActive,
+        colorItemBgSelected: controlItemBgActiveHover,
        colorItemBgSelectedHorizontal: 'transparent',
-        colorActiveBarWidth: lineWidthBold + lineWidth,
+        colorActiveBarWidth: 0,
        colorActiveBarHeight: lineWidthBold,
        colorActiveBarBorderSize: lineWidth,

@ -511,6 +529,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        colorDangerItemTextSelected: colorError,
        colorDangerItemBgActive: colorErrorBg,
        colorDangerItemBgSelected: colorErrorBg,
+
+        itemMarginInline: token.marginXXS,
      };
    },
  );
--- a/components/menu/style/theme.tsx
+++ b/components/menu/style/theme.tsx
@ -11,10 +11,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
    componentCls,
    colorItemText,
    colorItemTextSelected,
+    colorItemTextSelectedHorizontal,
    colorGroupTitle,
    colorItemBg,
    colorSubItemBg,
-    colorItemBgActive,
    colorItemBgSelectedHorizontal,
    colorItemBgSelected,
    colorActiveBarHeight,
@ -24,10 +24,12 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
    motionEaseInOut,
    motionEaseOut,
    menuItemPaddingInline,
+    itemMarginInline,
    motionDurationFast,
    colorItemTextHover,
    lineType,
    colorSplit,
+    colorItemBgActive,

    // Disabled
    colorItemTextDisabled,
@ -38,6 +40,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
    colorDangerItemTextSelected,
    colorDangerItemBgActive,
    colorDangerItemBgSelected,
+
+    radiusItem,
+
+    colorItemBgHover,
  } = token;

  return {
@ -72,9 +78,54 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
        },
      },

-      // Active
-      [`${componentCls}-item:active, ${componentCls}-submenu-title:active`]: {
-        background: colorItemBgActive,
+      [`&:not(${componentCls}-horizontal)`]: {
+        [`${componentCls}-item:not(${componentCls}-item-selected)`]: {
+          '&:hover': {
+            backgroundColor: colorItemBgHover,
+          },
+
+          '&:active::before': {
+            content: '""',
+            position: 'absolute',
+            insetInlineStart: 0,
+            top: 0,
+            width: `100%`,
+            height: '100%',
+            flex: 1,
+            borderRadius: radiusItem,
+            backgroundColor: colorItemBgActive,
+            transition: `background-color ${motionDurationFast}`,
+          },
+        },
+        [`${componentCls}-submenu-title`]: {
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            insetInlineStart: itemMarginInline,
+            top: 0,
+            width: `calc(100% - ${itemMarginInline * 2}px)`,
+            height: '100%',
+            borderRadius: radiusItem,
+            backgroundColor: 'transparent',
+            transition: `background-color ${motionDurationFast}`,
+          },
+
+          '&:hover::before': {
+            backgroundColor: colorItemBgHover,
+          },
+
+          '&:active::after': {
+            content: '""',
+            position: 'absolute',
+            insetInlineStart: itemMarginInline,
+            top: 0,
+            width: `calc(100% - ${itemMarginInline * 2}px)`,
+            height: '100%',
+            borderRadius: radiusItem,
+            backgroundColor: colorItemBgActive,
+            transition: `background-color ${motionDurationFast}`,
+          },
+        },
      },

      // Danger - only Item has
@ -152,18 +203,18 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
          },

          [`&:hover, &-active, &-open`]: {
-            color: colorItemTextSelected,
+            color: colorItemTextSelectedHorizontal,
            '&::after': {
              borderWidth: `${colorActiveBarHeight}px`,
-              borderBottomColor: colorItemTextSelected,
+              borderBottomColor: colorItemTextSelectedHorizontal,
            },
          },
          [`&-selected`]: {
-            color: colorItemTextSelected,
+            color: colorItemTextSelectedHorizontal,
            backgroundColor: colorItemBgSelectedHorizontal,
            '&::after': {
              borderWidth: `${colorActiveBarHeight}px`,
-              borderBottomColor: colorItemTextSelected,
+              borderBottomColor: colorItemTextSelectedHorizontal,
            },
          },
        },
@ -185,11 +236,12 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
        },

        // Item
-        [`${componentCls}-item, ${componentCls}-submenu-title`]: colorActiveBarBorderSize
-          ? {
-              width: `calc(100% + ${colorActiveBarBorderSize}px)`,
-            }
-          : {},
+        [`${componentCls}-item, ${componentCls}-submenu-title`]:
+          colorActiveBarBorderSize && colorActiveBarWidth
+            ? {
+                width: `calc(100% + ${colorActiveBarBorderSize}px)`,
+              }
+            : {},

        [`${componentCls}-item`]: {
          position: 'relative',
--- a/components/menu/style/vertical.tsx
+++ b/components/menu/style/vertical.tsx
@ -3,8 +3,15 @@ import type { MenuToken } from '.';
 import type { GenerateStyle } from '../../theme';

 const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
-  const { componentCls, menuItemHeight, menuItemMarginInline, padding, menuArrowSize, fontSize } =
-    token;
+  const {
+    componentCls,
+    menuItemHeight,
+    menuItemMarginInline,
+    itemMarginInline,
+    padding,
+    menuArrowSize,
+    fontSize,
+  } = token;

  const paddingWithArrow = menuArrowSize + fontSize;

@ -16,12 +23,21 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
    [`${componentCls}-item, ${componentCls}-submenu-title`]: {
      height: menuItemHeight,
      lineHeight: `${menuItemHeight}px`,
-      marginBlock: menuItemMarginInline,
      paddingInline: padding,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    },

+    [`${componentCls}-item`]: {
+      marginInline: itemMarginInline,
+      marginBlock: menuItemMarginInline,
+      width: `calc(100% - ${itemMarginInline * 2}px)`,
+    },
+
+    [`${componentCls}-submenu-title`]: {
+      marginBlock: menuItemMarginInline,
+    },
+
    // disable margin collapsed
    [`${componentCls}-submenu`]: {
      paddingBottom: 0.02,