移除Antd横向折叠菜单三点图标，添加横向滚动箭头按钮

1. 隐藏Antd默认折叠菜单 #

Antd横向菜单空间不足时会自动生成三点折叠菜单，先通过CSS隐藏它：

/* 隐藏默认折叠按钮和下拉面板 */
.ant-menu-horizontal > .ant-menu-submenu {
  display: none !important;
}

2. 封装带滚动箭头的菜单组件 #

在外层包裹容器，添加左右箭头按钮，实现点击滚动逻辑。以下是完整React组件示例：

import React, { useRef } from 'react';
import { Menu, Button } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import './ScrollMenu.css';

const ScrollableHorizontalMenu = () => {
  const menuRef = useRef(null);

  // 菜单横向滚动逻辑
  const scrollMenu = (direction) => {
    const scrollStep = 200; // 可按需调整滚动步长
    if (menuRef.current) {
      menuRef.current.scrollBy({
        left: direction === 'left' ? -scrollStep : scrollStep,
        behavior: 'smooth'
      });
    }
  };

  const onMenuClicked = (e) => {
    // 保留原菜单点击逻辑
    console.log('选中菜单项:', e.key);
  };

  return (
    <div className="scroll-menu-container">
      <Button 
        className="scroll-btn scroll-btn-left"
        icon={<LeftOutlined />}
        onClick={() => scrollMenu('left')}
        ghost
      />
      <div className="menu-wrapper" ref={menuRef}>
        <Menu
          defaultSelectedKeys={['1']}
          mode="horizontal"
          theme="light"
          onClick={onMenuClicked}
          className="scroll-menu"
        >
          <Menu.Item key="1">Characters</Menu.Item>
          <Menu.Item key="3">Objects</Menu.Item>
          <Menu.Item key="2">Emotions</Menu.Item>
          <Menu.Item key="4">Audio</Menu.Item>
          <Menu.Item key="8">Activity</Menu.Item>
          <Menu.Item key="6">Location</Menu.Item>
          <Menu.Item key="7">Moderations</Menu.Item>
          <Menu.Item key="5">Tags</Menu.Item>
        </Menu>
      </div>
      <Button 
        className="scroll-btn scroll-btn-right"
        icon={<RightOutlined />}
        onClick={() => scrollMenu('right')}
        ghost
      />
    </div>
  );
};

export default ScrollableHorizontalMenu;

3. 添加配套样式（ScrollMenu.css） #

设置容器布局，实现菜单横向滚动并固定箭头位置：

.scroll-menu-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.menu-wrapper {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* 隐藏Firefox滚动条 */
}

/* 隐藏Chrome等浏览器滚动条 */
.menu-wrapper::-webkit-scrollbar {
  display: none;
}

.scroll-menu {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

/* 箭头按钮样式 */
.scroll-btn {
  position: absolute;
  z-index: 1;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.scroll-btn-left {
  left: 0;
}

.scroll-btn-right {
  right: 0;
}

/* 桌面端隐藏箭头，使用默认布局 */
@media (min-width: 768px) {
  .scroll-btn {
    display: none;
  }
}

补充优化点 #

• 自适应滚动：可以通过获取菜单项的offsetWidth，替换固定的scrollStep，实现每次滚动一个菜单项的宽度。
• 箭头显隐控制：监听菜单滚动位置，当滚动到最左端时隐藏左箭头，最右端时隐藏右箭头。
• 样式自定义：可根据UI需求修改箭头的大小、颜色，以及菜单的间距和背景。

内容的提问来源于stack exchange，提问作者Akshay Bhaskare