--- order: 0 title: zh-CN: 顶部导航 en-US: Top Navigation --- ## zh-CN 水平的顶部导航菜单。 ## en-US Horizontal top navigation menu. ```jsx import { Menu } from 'antd'; import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons'; const { SubMenu } = Menu; class App extends React.Component { state = { current: 'mail', }; handleClick = e => { console.log('click ', e); this.setState({ current: e.key }); }; render() { const { current } = this.state; return ( }> Navigation One }> Navigation Two } title="Navigation Three - Submenu"> Option 1 Option 2 Option 3 Option 4 Navigation Four - Link ); } } ReactDOM.render(, mountNode); ```