Menu导航菜单

为页面和功能提供导航的菜单列表。

何时使用

导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

更多布局和导航的使用可以参考：通用布局。

代码演示

Menu导航菜单 - 图1

顶部导航

水平的顶部导航菜单。

  1. import { Menu } from 'antd';
  2. import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
  4. const { SubMenu } = Menu;
  6. class App extends React.Component {
  7.   state = {
  8.     current: 'mail',
  9.   };
  11.   handleClick = e => {
  12.     console.log('click ', e);
  13.     this.setState({
  14.       current: e.key,
  15.     });
  16.   };
  18.   render() {
  19.     return (
  20.       <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
  21.         <Menu.Item key="mail" icon={<MailOutlined />}>
  22.           Navigation One
  23.         </Menu.Item>
  24.         <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
  25.           Navigation Two
  26.         </Menu.Item>
  27.         <SubMenu icon={<SettingOutlined />} title="Navigation Three - Submenu">
  28.           <Menu.ItemGroup title="Item 1">
  29.             <Menu.Item key="setting:1">Option 1</Menu.Item>
  30.             <Menu.Item key="setting:2">Option 2</Menu.Item>
  31.           </Menu.ItemGroup>
  32.           <Menu.ItemGroup title="Item 2">
  33.             <Menu.Item key="setting:3">Option 3</Menu.Item>
  34.             <Menu.Item key="setting:4">Option 4</Menu.Item>
  35.           </Menu.ItemGroup>
  36.         </SubMenu>
  37.         <Menu.Item key="alipay">
  38.           <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
  39.             Navigation Four - Link
  40.           </a>
  41.         </Menu.Item>
  42.       </Menu>
  43.     );
  44.   }
  45. }
  47. ReactDOM.render(<App />, mountNode);

Menu导航菜单 - 图2

内嵌菜单

垂直菜单，子菜单内嵌在菜单区域。

  1. import { Menu } from 'antd';
  2. import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
  4. const { SubMenu } = Menu;
  6. class Sider extends React.Component {
  7.   handleClick = e => {
  8.     console.log('click ', e);
  9.   };
  11.   render() {
  12.     return (
  13.       <Menu
  14.         onClick={this.handleClick}
  15.         style={{ width: 256 }}
  16.         defaultSelectedKeys={['1']}
  17.         defaultOpenKeys={['sub1']}
  18.         mode="inline"
  19.       >
  20.         <SubMenu
  21.           key="sub1"
  22.           title={
  23.             <span>
  24.               <MailOutlined />
  25.               <span>Navigation One</span>
  26.             </span>
  27.           }
  28.         >
  29.           <Menu.ItemGroup key="g1" title="Item 1">
  30.             <Menu.Item key="1">Option 1</Menu.Item>
  31.             <Menu.Item key="2">Option 2</Menu.Item>
  32.           </Menu.ItemGroup>
  33.           <Menu.ItemGroup key="g2" title="Item 2">
  34.             <Menu.Item key="3">Option 3</Menu.Item>
  35.             <Menu.Item key="4">Option 4</Menu.Item>
  36.           </Menu.ItemGroup>
  37.         </SubMenu>
  38.         <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
  39.           <Menu.Item key="5">Option 5</Menu.Item>
  40.           <Menu.Item key="6">Option 6</Menu.Item>
  41.           <SubMenu key="sub3" title="Submenu">
  42.             <Menu.Item key="7">Option 7</Menu.Item>
  43.             <Menu.Item key="8">Option 8</Menu.Item>
  44.           </SubMenu>
  45.         </SubMenu>
  46.         <SubMenu
  47.           key="sub4"
  48.           title={
  49.             <span>
  50.               <SettingOutlined />
  51.               <span>Navigation Three</span>
  52.             </span>
  53.           }
  54.         >
  55.           <Menu.Item key="9">Option 9</Menu.Item>
  56.           <Menu.Item key="10">Option 10</Menu.Item>
  57.           <Menu.Item key="11">Option 11</Menu.Item>
  58.           <Menu.Item key="12">Option 12</Menu.Item>
  59.         </SubMenu>
  60.       </Menu>
  61.     );
  62.   }
  63. }
  65. ReactDOM.render(<Sider />, mountNode);

Menu导航菜单 - 图3

缩起内嵌菜单

内嵌菜单可以被缩起/展开。

你可以在 Layout 里查看侧边布局结合的完整示例。

  1. import { Menu, Button } from 'antd';
  2. import {
  3.   AppstoreOutlined,
  4.   MenuUnfoldOutlined,
  5.   MenuFoldOutlined,
  6.   PieChartOutlined,
  7.   DesktopOutlined,
  8.   ContainerOutlined,
  9.   MailOutlined,
  10. } from '@ant-design/icons';
  12. const { SubMenu } = Menu;
  14. class App extends React.Component {
  15.   state = {
  16.     collapsed: false,
  17.   };
  19.   toggleCollapsed = () => {
  20.     this.setState({
  21.       collapsed: !this.state.collapsed,
  22.     });
  23.   };
  25.   render() {
  26.     return (
  27.       <div style={{ width: 256 }}>
  28.         <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
  29.           {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
  30.         </Button>
  31.         <Menu
  32.           defaultSelectedKeys={['1']}
  33.           defaultOpenKeys={['sub1']}
  34.           mode="inline"
  35.           theme="dark"
  36.           inlineCollapsed={this.state.collapsed}
  37.         >
  38.           <Menu.Item key="1" icon={<PieChartOutlined />}>
  39.             Option 1
  40.           </Menu.Item>
  41.           <Menu.Item key="2" icon={<DesktopOutlined />}>
  42.             Option 2
  43.           </Menu.Item>
  44.           <Menu.Item key="3" icon={<ContainerOutlined />}>
  45.             Option 3
  46.           </Menu.Item>
  47.           <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
  48.             <Menu.Item key="5">Option 5</Menu.Item>
  49.             <Menu.Item key="6">Option 6</Menu.Item>
  50.             <Menu.Item key="7">Option 7</Menu.Item>
  51.             <Menu.Item key="8">Option 8</Menu.Item>
  52.           </SubMenu>
  53.           <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
  54.             <Menu.Item key="9">Option 9</Menu.Item>
  55.             <Menu.Item key="10">Option 10</Menu.Item>
  56.             <SubMenu key="sub3" title="Submenu">
  57.               <Menu.Item key="11">Option 11</Menu.Item>
  58.               <Menu.Item key="12">Option 12</Menu.Item>
  59.             </SubMenu>
  60.           </SubMenu>
  61.         </Menu>
  62.       </div>
  63.     );
  64.   }
  65. }
  67. ReactDOM.render(<App />, mountNode);

Menu导航菜单 - 图4

只展开当前父级菜单

点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。

  1. import { Menu } from 'antd';
  2. import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
  4. const { SubMenu } = Menu;
  6. class Sider extends React.Component {
  7.   // submenu keys of first level
  8.   rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
  10.   state = {
  11.     openKeys: ['sub1'],
  12.   };
  14.   onOpenChange = openKeys => {
  15.     const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
  16.     if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
  17.       this.setState({ openKeys });
  18.     } else {
  19.       this.setState({
  20.         openKeys: latestOpenKey ? [latestOpenKey] : [],
  21.       });
  22.     }
  23.   };
  25.   render() {
  26.     return (
  27.       <Menu
  28.         mode="inline"
  29.         openKeys={this.state.openKeys}
  30.         onOpenChange={this.onOpenChange}
  31.         style={{ width: 256 }}
  32.       >
  33.         <SubMenu
  34.           key="sub1"
  35.           title={
  36.             <span>
  37.               <MailOutlined />
  38.               <span>Navigation One</span>
  39.             </span>
  40.           }
  41.         >
  42.           <Menu.Item key="1">Option 1</Menu.Item>
  43.           <Menu.Item key="2">Option 2</Menu.Item>
  44.           <Menu.Item key="3">Option 3</Menu.Item>
  45.           <Menu.Item key="4">Option 4</Menu.Item>
  46.         </SubMenu>
  47.         <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
  48.           <Menu.Item key="5">Option 5</Menu.Item>
  49.           <Menu.Item key="6">Option 6</Menu.Item>
  50.           <SubMenu key="sub3" title="Submenu">
  51.             <Menu.Item key="7">Option 7</Menu.Item>
  52.             <Menu.Item key="8">Option 8</Menu.Item>
  53.           </SubMenu>
  54.         </SubMenu>
  55.         <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
  56.           <Menu.Item key="9">Option 9</Menu.Item>
  57.           <Menu.Item key="10">Option 10</Menu.Item>
  58.           <Menu.Item key="11">Option 11</Menu.Item>
  59.           <Menu.Item key="12">Option 12</Menu.Item>
  60.         </SubMenu>
  61.       </Menu>
  62.     );
  63.   }
  64. }
  66. ReactDOM.render(<Sider />, mountNode);

Menu导航菜单 - 图5

垂直菜单

子菜单是弹出的形式。

  1. import { Menu } from 'antd';
  2. import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
  4. const { SubMenu } = Menu;
  6. function handleClick(e) {
  7.   console.log('click', e);
  8. }
  10. ReactDOM.render(
  11.   <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
  12.     <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
  13.       <Menu.ItemGroup title="Item 1">
  14.         <Menu.Item key="1">Option 1</Menu.Item>
  15.         <Menu.Item key="2">Option 2</Menu.Item>
  16.       </Menu.ItemGroup>
  17.       <Menu.ItemGroup title="Iteom 2">
  18.         <Menu.Item key="3">Option 3</Menu.Item>
  19.         <Menu.Item key="4">Option 4</Menu.Item>
  20.       </Menu.ItemGroup>
  21.     </SubMenu>
  22.     <SubMenu
  23.       key="sub2"
  24.       title={
  25.         <span>
  26.           <AppstoreOutlined />
  27.           <span>Navigation Two</span>
  28.         </span>
  29.       }
  30.     >
  31.       <Menu.Item key="5">Option 5</Menu.Item>
  32.       <Menu.Item key="6">Option 6</Menu.Item>
  33.       <SubMenu key="sub3" title="Submenu">
  34.         <Menu.Item key="7">Option 7</Menu.Item>
  35.         <Menu.Item key="8">Option 8</Menu.Item>
  36.       </SubMenu>
  37.     </SubMenu>
  38.     <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
  39.       <Menu.Item key="9">Option 9</Menu.Item>
  40.       <Menu.Item key="10">Option 10</Menu.Item>
  41.       <Menu.Item key="11">Option 11</Menu.Item>
  42.       <Menu.Item key="12">Option 12</Menu.Item>
  43.     </SubMenu>
  44.   </Menu>,
  45.   mountNode,
  46. );

Menu导航菜单 - 图6

主题

内建了两套主题 light|dark，默认 light。

  1. import { Menu, Switch } from 'antd';
  2. import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
  4. const { SubMenu } = Menu;
  6. class Sider extends React.Component {
  7.   state = {
  8.     theme: 'dark',
  9.     current: '1',
  10.   };
  12.   changeTheme = value => {
  13.     this.setState({
  14.       theme: value ? 'dark' : 'light',
  15.     });
  16.   };
  18.   handleClick = e => {
  19.     console.log('click ', e);
  20.     this.setState({
  21.       current: e.key,
  22.     });
  23.   };
  25.   render() {
  26.     return (
  27.       <>
  28.         <Switch
  29.           checked={this.state.theme === 'dark'}
  30.           onChange={this.changeTheme}
  31.           checkedChildren="Dark"
  32.           unCheckedChildren="Light"
  33.         />
  34.         <br />
  35.         <br />
  36.         <Menu
  37.           theme={this.state.theme}
  38.           onClick={this.handleClick}
  39.           style={{ width: 256 }}
  40.           defaultOpenKeys={['sub1']}
  41.           selectedKeys={[this.state.current]}
  42.           mode="inline"
  43.         >
  44.           <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
  45.             <Menu.Item key="1">Option 1</Menu.Item>
  46.             <Menu.Item key="2">Option 2</Menu.Item>
  47.             <Menu.Item key="3">Option 3</Menu.Item>
  48.             <Menu.Item key="4" danger>
  49.               Option 4
  50.             </Menu.Item>
  51.           </SubMenu>
  52.           <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
  53.             <Menu.Item key="5">Option 5</Menu.Item>
  54.             <Menu.Item key="6">Option 6</Menu.Item>
  55.             <SubMenu key="sub3" title="Submenu">
  56.               <Menu.Item key="7">Option 7</Menu.Item>
  57.               <Menu.Item key="8">Option 8</Menu.Item>
  58.             </SubMenu>
  59.           </SubMenu>
  60.           <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
  61.             <Menu.Item key="9">Option 9</Menu.Item>
  62.             <Menu.Item key="10">Option 10</Menu.Item>
  63.             <Menu.Item key="11">Option 11</Menu.Item>
  64.             <Menu.Item key="12">Option 12</Menu.Item>
  65.           </SubMenu>
  66.         </Menu>
  67.       </>
  68.     );
  69.   }
  70. }
  72. ReactDOM.render(<Sider />, mountNode);

Menu导航菜单 - 图7

切换菜单类型

展示动态切换模式。

  1. import { Menu, Switch, Divider } from 'antd';
  2. import {
  3.   MailOutlined,
  4.   CalendarOutlined,
  5.   AppstoreOutlined,
  6.   SettingOutlined,
  7.   LinkOutlined,
  8. } from '@ant-design/icons';
  10. const { SubMenu } = Menu;
  12. class Sider extends React.Component {
  13.   state = {
  14.     mode: 'inline',
  15.     theme: 'light',
  16.   };
  18.   changeMode = value => {
  19.     this.setState({
  20.       mode: value ? 'vertical' : 'inline',
  21.     });
  22.   };
  24.   changeTheme = value => {
  25.     this.setState({
  26.       theme: value ? 'dark' : 'light',
  27.     });
  28.   };
  30.   render() {
  31.     return (
  32.       <>
  33.         <Switch onChange={this.changeMode} /> Change Mode
  34.         <Divider type="vertical" />
  35.         <Switch onChange={this.changeTheme} /> Change Style
  36.         <br />
  37.         <br />
  38.         <Menu
  39.           style={{ width: 256 }}
  40.           defaultSelectedKeys={['1']}
  41.           defaultOpenKeys={['sub1']}
  42.           mode={this.state.mode}
  43.           theme={this.state.theme}
  44.         >
  45.           <Menu.Item key="1" icon={<MailOutlined />}>
  46.             Navigation One
  47.           </Menu.Item>
  48.           <Menu.Item key="2" icon={<CalendarOutlined />}>
  49.             Navigation Two
  50.           </Menu.Item>
  51.           <SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
  52.             <Menu.Item key="3">Option 3</Menu.Item>
  53.             <Menu.Item key="4">Option 4</Menu.Item>
  54.             <SubMenu key="sub1-2" title="Submenu">
  55.               <Menu.Item key="5">Option 5</Menu.Item>
  56.               <Menu.Item key="6">Option 6</Menu.Item>
  57.             </SubMenu>
  58.           </SubMenu>
  59.           <SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
  60.             <Menu.Item key="7">Option 7</Menu.Item>
  61.             <Menu.Item key="8">Option 8</Menu.Item>
  62.             <Menu.Item key="9">Option 9</Menu.Item>
  63.             <Menu.Item key="10">Option 10</Menu.Item>
  64.           </SubMenu>
  65.           <Menu.Item key="link" icon={<LinkOutlined />}>
  66.             <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
  67.               Ant Design
  68.             </a>
  69.           </Menu.Item>
  70.         </Menu>
  71.       </>
  72.     );
  73.   }
  74. }
  76. ReactDOM.render(<Sider />, mountNode);

API

  1. <Menu>
  2.   <Menu.Item>菜单项</Menu.Item>
  3.   <SubMenu title="子菜单">
  4.     <Menu.Item>子菜单项</Menu.Item>
  5.   </SubMenu>
  6. </Menu>

Menu

参数说明类型默认值版本
defaultOpenKeys初始展开的 SubMenu 菜单项 key 数组string[]
defaultSelectedKeys初始选中的菜单项 key 数组string[]
forceSubMenuRender在子菜单展示之前就渲染进 DOMbooleanfalse
inlineCollapsedinline 时菜单是否收起状态boolean-
inlineIndentinline 模式的菜单缩进宽度number24
mode菜单类型，现在支持垂直、水平、和内嵌模式三种vertical | horizontal | inlinevertical
multiple是否允许多选booleanfalse
openKeys当前展开的 SubMenu 菜单项 key 数组string[]
selectable是否允许选中booleantrue
selectedKeys当前选中的菜单项 key 数组string[]
style根节点样式CSSProperties
subMenuCloseDelay用户鼠标离开子菜单后关闭延时，单位：秒number0.1
subMenuOpenDelay用户鼠标进入子菜单后开启延时，单位：秒number0
theme主题颜色light | darklight
onClick点击 MenuItem 调用此函数function({ item, key, keyPath, domEvent })-
onDeselect取消选中时调用，仅在 multiple 生效function({ item, key, keyPath, selectedKeys, domEvent })-
onOpenChangeSubMenu 展开/关闭的回调function(openKeys: string[])noop
onSelect被选中时调用function({ item, key, keyPath, selectedKeys, domEvent })无  
overflowedIndicator自定义 Menu 折叠时的图标ReactNode-

More options in rc-menu

Menu.Item

参数说明类型默认值版本
disabled是否禁用booleanfalse
keyitem 的唯一标志string
title设置收缩时展示的悬浮标题string
icon菜单图标ReactNode4.2.0
danger展示错误状态样式booleanfalse4.3.0

注意：icon 是 4.2.0 新增的属性，之前的版本请使用下面的方式定义图标。

  1. <Menu.Item>
  2.   <PieChartOutlined />
  3.   <span>Option 1</span>
  4. </Menu.Item>
  5. <Menu.SubMenu
  6.   title={
  7.     <>
  8.       <PieChartOutlined />
  9.       <span>Option 2</span>
  10.     </>
  11.   }
  12. >
  13.   ...
  14. </Menu.SubMenu>

Menu.SubMenu

参数说明类型默认值版本
popupClassName子菜单样式string
children子菜单的菜单项Array<MenuItem|SubMenu>
disabled是否禁用booleanfalse
key唯一标志string
title子菜单项值string|ReactNode
icon菜单图标ReactNode4.2.0
onTitleClick点击子菜单标题function({ key, domEvent })

Menu.ItemGroup

参数说明类型默认值版本
children分组的菜单项MenuItem[]
title分组标题string|ReactNode

Menu.Divider

菜单项分割线，只用在弹出菜单内。