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">
  22.           <MailOutlined />
  23.           Navigation One
  24.         </Menu.Item>
  25.         <Menu.Item key="app" disabled>
  26.           <AppstoreOutlined />
  27.           Navigation Two
  28.         </Menu.Item>
  29.         <SubMenu
  30.           title={
  31.             <span className="submenu-title-wrapper">
  32.               <SettingOutlined />
  33.               Navigation Three - Submenu
  34.             </span>
  35.           }
  36.         >
  37.           <Menu.ItemGroup title="Item 1">
  38.             <Menu.Item key="setting:1">Option 1</Menu.Item>
  39.             <Menu.Item key="setting:2">Option 2</Menu.Item>
  40.           </Menu.ItemGroup>
  41.           <Menu.ItemGroup title="Item 2">
  42.             <Menu.Item key="setting:3">Option 3</Menu.Item>
  43.             <Menu.Item key="setting:4">Option 4</Menu.Item>
  44.           </Menu.ItemGroup>
  45.         </SubMenu>
  46.         <Menu.Item key="alipay">
  47.           <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
  48.             Navigation Four - Link
  49.           </a>
  50.         </Menu.Item>
  51.       </Menu>
  52.     );
  53.   }
  54. }
  56. 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
  39.           key="sub2"
  40.           title={
  41.             <span>
  42.               <AppstoreOutlined />
  43.               <span>Navigation Two</span>
  44.             </span>
  45.           }
  46.         >
  47.           <Menu.Item key="5">Option 5</Menu.Item>
  48.           <Menu.Item key="6">Option 6</Menu.Item>
  49.           <SubMenu key="sub3" title="Submenu">
  50.             <Menu.Item key="7">Option 7</Menu.Item>
  51.             <Menu.Item key="8">Option 8</Menu.Item>
  52.           </SubMenu>
  53.         </SubMenu>
  54.         <SubMenu
  55.           key="sub4"
  56.           title={
  57.             <span>
  58.               <SettingOutlined />
  59.               <span>Navigation Three</span>
  60.             </span>
  61.           }
  62.         >
  63.           <Menu.Item key="9">Option 9</Menu.Item>
  64.           <Menu.Item key="10">Option 10</Menu.Item>
  65.           <Menu.Item key="11">Option 11</Menu.Item>
  66.           <Menu.Item key="12">Option 12</Menu.Item>
  67.         </SubMenu>
  68.       </Menu>
  69.     );
  70.   }
  71. }
  73. 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.   InboxOutlined,
  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">
  39.             <PieChartOutlined />
  40.             <span>Option 1</span>
  41.           </Menu.Item>
  42.           <Menu.Item key="2">
  43.             <DesktopOutlined />
  44.             <span>Option 2</span>
  45.           </Menu.Item>
  46.           <Menu.Item key="3">
  47.             <InboxOutlined />
  48.             <span>Option 3</span>
  49.           </Menu.Item>
  50.           <SubMenu
  51.             key="sub1"
  52.             title={
  53.               <span>
  54.                 <MailOutlined />
  55.                 <span>Navigation One</span>
  56.               </span>
  57.             }
  58.           >
  59.             <Menu.Item key="5">Option 5</Menu.Item>
  60.             <Menu.Item key="6">Option 6</Menu.Item>
  61.             <Menu.Item key="7">Option 7</Menu.Item>
  62.             <Menu.Item key="8">Option 8</Menu.Item>
  63.           </SubMenu>
  64.           <SubMenu
  65.             key="sub2"
  66.             title={
  67.               <span>
  68.                 <AppstoreOutlined />
  69.                 <span>Navigation Two</span>
  70.               </span>
  71.             }
  72.           >
  73.             <Menu.Item key="9">Option 9</Menu.Item>
  74.             <Menu.Item key="10">Option 10</Menu.Item>
  75.             <SubMenu key="sub3" title="Submenu">
  76.               <Menu.Item key="11">Option 11</Menu.Item>
  77.               <Menu.Item key="12">Option 12</Menu.Item>
  78.             </SubMenu>
  79.           </SubMenu>
  80.         </Menu>
  81.       </div>
  82.     );
  83.   }
  84. }
  86. 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
  48.           key="sub2"
  49.           title={
  50.             <span>
  51.               <AppstoreOutlined />
  52.               <span>Navigation Two</span>
  53.             </span>
  54.           }
  55.         >
  56.           <Menu.Item key="5">Option 5</Menu.Item>
  57.           <Menu.Item key="6">Option 6</Menu.Item>
  58.           <SubMenu key="sub3" title="Submenu">
  59.             <Menu.Item key="7">Option 7</Menu.Item>
  60.             <Menu.Item key="8">Option 8</Menu.Item>
  61.           </SubMenu>
  62.         </SubMenu>
  63.         <SubMenu
  64.           key="sub4"
  65.           title={
  66.             <span>
  67.               <SettingOutlined />
  68.               <span>Navigation Three</span>
  69.             </span>
  70.           }
  71.         >
  72.           <Menu.Item key="9">Option 9</Menu.Item>
  73.           <Menu.Item key="10">Option 10</Menu.Item>
  74.           <Menu.Item key="11">Option 11</Menu.Item>
  75.           <Menu.Item key="12">Option 12</Menu.Item>
  76.         </SubMenu>
  77.       </Menu>
  78.     );
  79.   }
  80. }
  82. 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
  13.       key="sub1"
  14.       title={
  15.         <span>
  16.           <MailOutlined />
  17.           <span>Navigation One</span>
  18.         </span>
  19.       }
  20.     >
  21.       <Menu.ItemGroup title="Item 1">
  22.         <Menu.Item key="1">Option 1</Menu.Item>
  23.         <Menu.Item key="2">Option 2</Menu.Item>
  24.       </Menu.ItemGroup>
  25.       <Menu.ItemGroup title="Iteom 2">
  26.         <Menu.Item key="3">Option 3</Menu.Item>
  27.         <Menu.Item key="4">Option 4</Menu.Item>
  28.       </Menu.ItemGroup>
  29.     </SubMenu>
  30.     <SubMenu
  31.       key="sub2"
  32.       title={
  33.         <span>
  34.           <AppstoreOutlined />
  35.           <span>Navigation Two</span>
  36.         </span>
  37.       }
  38.     >
  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.   mountNode,
  62. );

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.       <div>
  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
  45.             key="sub1"
  46.             title={
  47.               <span>
  48.                 <MailOutlined />
  49.                 <span>Navigation One</span>
  50.               </span>
  51.             }
  52.           >
  53.             <Menu.Item key="1">Option 1</Menu.Item>
  54.             <Menu.Item key="2">Option 2</Menu.Item>
  55.             <Menu.Item key="3">Option 3</Menu.Item>
  56.             <Menu.Item key="4">Option 4</Menu.Item>
  57.           </SubMenu>
  58.           <SubMenu
  59.             key="sub2"
  60.             title={
  61.               <span>
  62.                 <AppstoreOutlined />
  63.                 <span>Navigation Two</span>
  64.               </span>
  65.             }
  66.           >
  67.             <Menu.Item key="5">Option 5</Menu.Item>
  68.             <Menu.Item key="6">Option 6</Menu.Item>
  69.             <SubMenu key="sub3" title="Submenu">
  70.               <Menu.Item key="7">Option 7</Menu.Item>
  71.               <Menu.Item key="8">Option 8</Menu.Item>
  72.             </SubMenu>
  73.           </SubMenu>
  74.           <SubMenu
  75.             key="sub4"
  76.             title={
  77.               <span>
  78.                 <SettingOutlined />
  79.                 <span>Navigation Three</span>
  80.               </span>
  81.             }
  82.           >
  83.             <Menu.Item key="9">Option 9</Menu.Item>
  84.             <Menu.Item key="10">Option 10</Menu.Item>
  85.             <Menu.Item key="11">Option 11</Menu.Item>
  86.             <Menu.Item key="12">Option 12</Menu.Item>
  87.           </SubMenu>
  88.         </Menu>
  89.       </div>
  90.     );
  91.   }
  92. }
  94. ReactDOM.render(<Sider />, mountNode);

Menu导航菜单 - 图7

切换菜单类型

展示动态切换模式。

  1. import { Menu, Switch } from 'antd';
  2. import {
  3.   MailOutlined,
  4.   CalendarOutlined,
  5.   AppstoreOutlined,
  6.   SettingOutlined,
  7. } from '@ant-design/icons';
  9. const { SubMenu } = Menu;
  11. class Sider extends React.Component {
  12.   state = {
  13.     mode: 'inline',
  14.     theme: 'light',
  15.   };
  17.   changeMode = value => {
  18.     this.setState({
  19.       mode: value ? 'vertical' : 'inline',
  20.     });
  21.   };
  23.   changeTheme = value => {
  24.     this.setState({
  25.       theme: value ? 'dark' : 'light',
  26.     });
  27.   };
  29.   render() {
  30.     return (
  31.       <div>
  32.         <Switch onChange={this.changeMode} /> Change Mode
  33.         <span className="ant-divider" style={{ margin: '0 1em' }} />
  34.         <Switch onChange={this.changeTheme} /> Change Style
  35.         <br />
  36.         <br />
  37.         <Menu
  38.           style={{ width: 256 }}
  39.           defaultSelectedKeys={['1']}
  40.           defaultOpenKeys={['sub1']}
  41.           mode={this.state.mode}
  42.           theme={this.state.theme}
  43.         >
  44.           <Menu.Item key="1">
  45.             <MailOutlined />
  46.             Navigation One
  47.           </Menu.Item>
  48.           <Menu.Item key="2">
  49.             <CalendarOutlined />
  50.             Navigation Two
  51.           </Menu.Item>
  52.           <SubMenu
  53.             key="sub1"
  54.             title={
  55.               <span>
  56.                 <AppstoreOutlined />
  57.                 <span>Navigation Three</span>
  58.               </span>
  59.             }
  60.           >
  61.             <Menu.Item key="3">Option 3</Menu.Item>
  62.             <Menu.Item key="4">Option 4</Menu.Item>
  63.             <SubMenu key="sub1-2" title="Submenu">
  64.               <Menu.Item key="5">Option 5</Menu.Item>
  65.               <Menu.Item key="6">Option 6</Menu.Item>
  66.             </SubMenu>
  67.           </SubMenu>
  68.           <SubMenu
  69.             key="sub2"
  70.             title={
  71.               <span>
  72.                 <SettingOutlined />
  73.                 <span>Navigation Four</span>
  74.               </span>
  75.             }
  76.           >
  77.             <Menu.Item key="7">Option 7</Menu.Item>
  78.             <Menu.Item key="8">Option 8</Menu.Item>
  79.             <Menu.Item key="9">Option 9</Menu.Item>
  80.             <Menu.Item key="10">Option 10</Menu.Item>
  81.           </SubMenu>
  82.         </Menu>
  83.       </div>
  84.     );
  85.   }
  86. }
  88. 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根节点样式object
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

Menu.SubMenu

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

Menu.ItemGroup

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

Menu.Divider

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