2016-03-31 09:40:55 +08:00
|
|
|
---
|
2022-04-20 17:56:11 +08:00
|
|
|
order: 0.5
|
2016-12-30 13:16:30 +08:00
|
|
|
title:
|
2016-08-26 14:42:41 +08:00
|
|
|
zh-CN: 顶部导航
|
|
|
|
en-US: Top Navigation
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2015-08-14 18:16:41 +08:00
|
|
|
|
2016-08-26 14:42:41 +08:00
|
|
|
## zh-CN
|
|
|
|
|
2015-08-14 18:16:41 +08:00
|
|
|
水平的顶部导航菜单。
|
|
|
|
|
2016-08-26 14:42:41 +08:00
|
|
|
## en-US
|
|
|
|
|
|
|
|
Horizontal top navigation menu.
|
|
|
|
|
2022-03-18 15:20:35 +08:00
|
|
|
```tsx
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { MenuProps } from 'antd';
|
|
|
|
import { Menu } from 'antd';
|
2020-04-15 23:00:51 +08:00
|
|
|
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2022-03-18 15:20:35 +08:00
|
|
|
const items: MenuProps['items'] = [
|
|
|
|
{
|
|
|
|
label: 'Navigation One',
|
|
|
|
key: 'mail',
|
|
|
|
icon: <MailOutlined />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Navigation Two',
|
|
|
|
key: 'app',
|
|
|
|
icon: <AppstoreOutlined />,
|
|
|
|
disabled: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Navigation Three - Submenu',
|
|
|
|
key: 'SubMenu',
|
|
|
|
icon: <SettingOutlined />,
|
|
|
|
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: (
|
|
|
|
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
|
|
|
|
Navigation Four - Link
|
|
|
|
</a>
|
|
|
|
),
|
|
|
|
key: 'alipay',
|
|
|
|
},
|
|
|
|
];
|
2015-08-14 18:16:41 +08:00
|
|
|
|
2022-03-18 15:20:35 +08:00
|
|
|
const App = () => {
|
|
|
|
const [current, setCurrent] = React.useState('mail');
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2022-03-18 15:20:35 +08:00
|
|
|
const onClick: MenuProps['onClick'] = e => {
|
2015-08-15 00:07:40 +08:00
|
|
|
console.log('click ', e);
|
2022-03-18 15:20:35 +08:00
|
|
|
setCurrent(e.key);
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2022-03-18 15:20:35 +08:00
|
|
|
return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />;
|
|
|
|
};
|
2015-08-14 18:16:41 +08:00
|
|
|
|
2022-04-15 16:20:56 +08:00
|
|
|
export default App;
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|