如何使用AntDesign的导航菜单组件

要使用AntDesign的导航菜单组件，您需要首先安装AntDesign并引入相应的组件。下面是一个简单的示例代码，演示如何在React应用程序中使用AntDesign的导航菜单组件：

import React from 'react';
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

class App extends React.Component {
  render() {
    return (
      <Menu mode="horizontal">
        <Menu.Item key="mail" icon={<MailOutlined />}>
          Navigation One
        </Menu.Item>
        <Menu.Item key="app" icon={<AppstoreOutlined />}>
          Navigation Two
        </Menu.Item>
        <SubMenu key="SubMenu" icon={<SettingOutlined />} title="Navigation Three - Submenu">
          <Menu.ItemGroup title="Item 1">
            <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item>
          </Menu.ItemGroup>
          <Menu.ItemGroup title="Item 2">
            <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item>
          </Menu.ItemGroup>
        </SubMenu>
      </Menu>
    );
  }
}

export default App;

在上面的示例中，我们引入了Menu和SubMenu组件，并使用Menu.Item和SubMenu.ItemGroup创建了导航菜单。您可以根据需要添加更多的菜单项和子菜单项，并使用AntDesign提供的图标组件来为菜单项添加图标。您还可以根据自己的需求自定义菜单的样式和布局。