能否使用Mantine UI与React创建多级嵌套菜单？

问题原因 #

你直接将Menu.Dropdown嵌套在主菜单的Menu.Dropdown内的写法是错误的——Mantine 6.x的Menu.Dropdown只能作为Menu组件的直接子元素，这种嵌套方式会脱离原Menu的样式与定位上下文，最终导致UI异常。要实现多级嵌套菜单，必须在父级Menu.Item内部嵌套完整的Menu组件。

正确实现代码 #

import './App.css';
import { Menu, Button, Text } from '@mantine/core';
import { 
  IconSettings, IconSearch, IconPhoto, IconMessageCircle, 
  IconTrash, IconArrowsLeftRight, IconChevronRight 
} from '@tabler/icons-react';

function App() {
  return (
    <div className="App">
      <Menu shadow="md" width={200}>
        <Menu.Target>
          <Button>Toggle menu</Button>
        </Menu.Target>

        <Menu.Dropdown>
          <Menu.Label>Application</Menu.Label>
          {/* 第一级嵌套菜单：Settings子菜单 */}
          <Menu.Item icon={<IconSettings size={14} />}>
            <Menu shadow="md" width={200} position="right-start" offset={-4}>
              <Menu.Target>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', padding: '8px 12px' }}>
                  <span>Settings</span>
                  <IconChevronRight size={14} />
                </div>
              </Menu.Target>
              <Menu.Dropdown>
                <Menu.Label>Text Format</Menu.Label>
                <Menu.Item>Font Size</Menu.Item>
                <Menu.Item>Font Style</Menu.Item>
                {/* 第二级嵌套菜单：Document子菜单 */}
                <Menu.Item>
                  <Menu shadow="md" width={200} position="right-start" offset={-4}>
                    <Menu.Target>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', padding: '8px 12px' }}>
                        <span>Document</span>
                        <IconChevronRight size={14} />
                      </div>
                    </Menu.Target>
                    <Menu.Dropdown>
                      <Menu.Item>Save As</Menu.Item>
                      <Menu.Item>Export</Menu.Item>
                    </Menu.Dropdown>
                  </Menu>
                </Menu.Item>
                <Menu.Item>Other Settings</Menu.Item>
              </Menu.Dropdown>
            </Menu>
          </Menu.Item>
          <Menu.Item icon={<IconMessageCircle size={14} />}>Messages</Menu.Item>
          <Menu.Item icon={<IconPhoto size={14} />}>Gallery</Menu.Item>
          <Menu.Item
            icon={<IconSearch size={14} />}
            rightSection={<Text size="xs" color="dimmed">⌘K</Text>}
          >
            Search
          </Menu.Item>

          <Menu.Divider />

          <Menu.Label>Danger zone</Menu.Label>
          <Menu.Item icon={<IconArrowsLeftRight size={14} />}>Transfer my data</Menu.Item>
          <Menu.Item color="red" icon={<IconTrash size={14} />}>Delete my account</Menu.Item>
        </Menu.Dropdown>
      </Menu>
    </div>
  );
}

export default App;

核心实现要点 #

• 每个子菜单都是独立的Menu组件，避免嵌套Menu.Dropdown引发的上下文混乱
• 用自定义触发区域（搭配箭头图标）包裹子菜单的Menu.Target，模拟原生嵌套菜单的交互提示
• 设置子菜单的position="right-start"和offset={-4}，让子菜单与父菜单对齐，保持视觉一致性
• 多级嵌套可重复上述逻辑，在子菜单的Menu.Item内继续嵌套新的Menu组件

样式优化提示 #

如果需要让触发区域的样式和普通Menu.Item完全一致，可以复用Mantine的Menu.Item CSS类名，或者直接用Menu.Item作为子菜单Menu.Target的容器，调整内部布局即可。

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