如何使用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提供的圖標組件來為菜單項添加圖標。您還可以根據自己的需求自定義菜單的樣式和布局。