--- order: 0.5 title: zh-CN: 顶部导航 en-US: Top Navigation --- ## zh-CN 水平的顶部导航菜单。 ## en-US Horizontal top navigation menu. ```tsx import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; import type { MenuProps } from 'antd'; import { Menu } from 'antd'; import React, { useState } from 'react'; const items: MenuProps['items'] = [ { label: 'Navigation One', key: 'mail', icon: , }, { label: 'Navigation Two', key: 'app', icon: , disabled: true, }, { label: 'Navigation Three - Submenu', key: 'SubMenu', icon: , children: [ { type: 'group', label: 'Item 1', children: [ { label: 'Option 1', key: 'setting:1', }, { label: 'Option 2', key: 'setting:2', }, ], }, { type: 'group', label: 'Item 2', children: [ { label: 'Option 3', key: 'setting:3', }, { label: 'Option 4', key: 'setting:4', }, ], }, ], }, { label: ( Navigation Four - Link ), key: 'alipay', }, ]; const App: React.FC = () => { const [current, setCurrent] = useState('mail'); const onClick: MenuProps['onClick'] = e => { console.log('click ', e); setCurrent(e.key); }; return ; }; export default App; ```