Menu导航菜单

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

何时使用

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

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

代码演示

Menu导航菜单 - 图1

顶部导航

水平的顶部导航菜单。

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

Menu导航菜单 - 图2

内嵌菜单

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

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

Menu导航菜单 - 图3

缩起内嵌菜单

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

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

  1. import { Menu, Icon, Button } from 'antd';
  3. const { SubMenu } = Menu;
  5. class App extends React.Component {
  6.   state = {
  7.     collapsed: false,
  8.   };
  10.   toggleCollapsed = () => {
  11.     this.setState({
  12.       collapsed: !this.state.collapsed,
  13.     });
  14.   };
  16.   render() {
  17.     return (
  18.       <div style={{ width: 256 }}>
  19.         <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
  20.           <Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
  21.         </Button>
  22.         <Menu
  23.           defaultSelectedKeys={['1']}
  24.           defaultOpenKeys={['sub1']}
  25.           mode="inline"
  26.           theme="dark"
  27.           inlineCollapsed={this.state.collapsed}
  28.         >
  29.           <Menu.Item key="1">
  30.             <Icon type="pie-chart" />
  31.             <span>Option 1</span>
  32.           </Menu.Item>
  33.           <Menu.Item key="2">
  34.             <Icon type="desktop" />
  35.             <span>Option 2</span>
  36.           </Menu.Item>
  37.           <Menu.Item key="3">
  38.             <Icon type="inbox" />
  39.             <span>Option 3</span>
  40.           </Menu.Item>
  41.           <SubMenu
  42.             key="sub1"
  43.             title={
  44.               <span>
  45.                 <Icon type="mail" />
  46.                 <span>Navigation One</span>
  47.               </span>
  48.             }
  49.           >
  50.             <Menu.Item key="5">Option 5</Menu.Item>
  51.             <Menu.Item key="6">Option 6</Menu.Item>
  52.             <Menu.Item key="7">Option 7</Menu.Item>
  53.             <Menu.Item key="8">Option 8</Menu.Item>
  54.           </SubMenu>
  55.           <SubMenu
  56.             key="sub2"
  57.             title={
  58.               <span>
  59.                 <Icon type="appstore" />
  60.                 <span>Navigation Two</span>
  61.               </span>
  62.             }
  63.           >
  64.             <Menu.Item key="9">Option 9</Menu.Item>
  65.             <Menu.Item key="10">Option 10</Menu.Item>
  66.             <SubMenu key="sub3" title="Submenu">
  67.               <Menu.Item key="11">Option 11</Menu.Item>
  68.               <Menu.Item key="12">Option 12</Menu.Item>
  69.             </SubMenu>
  70.           </SubMenu>
  71.         </Menu>
  72.       </div>
  73.     );
  74.   }
  75. }
  77. ReactDOM.render(<App />, mountNode);

Menu导航菜单 - 图4

只展开当前父级菜单

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

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

Menu导航菜单 - 图5

垂直菜单

子菜单是弹出的形式。

  1. import { Menu, Icon } from 'antd';
  3. const { SubMenu } = Menu;
  5. function handleClick(e) {
  6.   console.log('click', e);
  7. }
  9. ReactDOM.render(
  10.   <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
  11.     <SubMenu
  12.       key="sub1"
  13.       title={
  14.         <span>
  15.           <Icon type="mail" />
  16.           <span>Navigation One</span>
  17.         </span>
  18.       }
  19.     >
  20.       <Menu.ItemGroup title="Item 1">
  21.         <Menu.Item key="1">Option 1</Menu.Item>
  22.         <Menu.Item key="2">Option 2</Menu.Item>
  23.       </Menu.ItemGroup>
  24.       <Menu.ItemGroup title="Iteom 2">
  25.         <Menu.Item key="3">Option 3</Menu.Item>
  26.         <Menu.Item key="4">Option 4</Menu.Item>
  27.       </Menu.ItemGroup>
  28.     </SubMenu>
  29.     <SubMenu
  30.       key="sub2"
  31.       title={
  32.         <span>
  33.           <Icon type="appstore" />
  34.           <span>Navigation Two</span>
  35.         </span>
  36.       }
  37.     >
  38.       <Menu.Item key="5">Option 5</Menu.Item>
  39.       <Menu.Item key="6">Option 6</Menu.Item>
  40.       <SubMenu key="sub3" title="Submenu">
  41.         <Menu.Item key="7">Option 7</Menu.Item>
  42.         <Menu.Item key="8">Option 8</Menu.Item>
  43.       </SubMenu>
  44.     </SubMenu>
  45.     <SubMenu
  46.       key="sub4"
  47.       title={
  48.         <span>
  49.           <Icon type="setting" />
  50.           <span>Navigation Three</span>
  51.         </span>
  52.       }
  53.     >
  54.       <Menu.Item key="9">Option 9</Menu.Item>
  55.       <Menu.Item key="10">Option 10</Menu.Item>
  56.       <Menu.Item key="11">Option 11</Menu.Item>
  57.       <Menu.Item key="12">Option 12</Menu.Item>
  58.     </SubMenu>
  59.   </Menu>,
  60.   mountNode,
  61. );

Menu导航菜单 - 图6

主题

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

  1. import { Menu, Icon, Switch } from 'antd';
  3. const { SubMenu } = Menu;
  5. class Sider extends React.Component {
  6.   state = {
  7.     theme: 'dark',
  8.     current: '1',
  9.   };
  11.   changeTheme = value => {
  12.     this.setState({
  13.       theme: value ? 'dark' : 'light',
  14.     });
  15.   };
  17.   handleClick = e => {
  18.     console.log('click ', e);
  19.     this.setState({
  20.       current: e.key,
  21.     });
  22.   };
  24.   render() {
  25.     return (
  26.       <div>
  27.         <Switch
  28.           checked={this.state.theme === 'dark'}
  29.           onChange={this.changeTheme}
  30.           checkedChildren="Dark"
  31.           unCheckedChildren="Light"
  32.         />
  33.         <br />
  34.         <br />
  35.         <Menu
  36.           theme={this.state.theme}
  37.           onClick={this.handleClick}
  38.           style={{ width: 256 }}
  39.           defaultOpenKeys={['sub1']}
  40.           selectedKeys={[this.state.current]}
  41.           mode="inline"
  42.         >
  43.           <SubMenu
  44.             key="sub1"
  45.             title={
  46.               <span>
  47.                 <Icon type="mail" />
  48.                 <span>Navigation One</span>
  49.               </span>
  50.             }
  51.           >
  52.             <Menu.Item key="1">Option 1</Menu.Item>
  53.             <Menu.Item key="2">Option 2</Menu.Item>
  54.             <Menu.Item key="3">Option 3</Menu.Item>
  55.             <Menu.Item key="4">Option 4</Menu.Item>
  56.           </SubMenu>
  57.           <SubMenu
  58.             key="sub2"
  59.             title={
  60.               <span>
  61.                 <Icon type="appstore" />
  62.                 <span>Navigation Two</span>
  63.               </span>
  64.             }
  65.           >
  66.             <Menu.Item key="5">Option 5</Menu.Item>
  67.             <Menu.Item key="6">Option 6</Menu.Item>
  68.             <SubMenu key="sub3" title="Submenu">
  69.               <Menu.Item key="7">Option 7</Menu.Item>
  70.               <Menu.Item key="8">Option 8</Menu.Item>
  71.             </SubMenu>
  72.           </SubMenu>
  73.           <SubMenu
  74.             key="sub4"
  75.             title={
  76.               <span>
  77.                 <Icon type="setting" />
  78.                 <span>Navigation Three</span>
  79.               </span>
  80.             }
  81.           >
  82.             <Menu.Item key="9">Option 9</Menu.Item>
  83.             <Menu.Item key="10">Option 10</Menu.Item>
  84.             <Menu.Item key="11">Option 11</Menu.Item>
  85.             <Menu.Item key="12">Option 12</Menu.Item>
  86.           </SubMenu>
  87.         </Menu>
  88.       </div>
  89.     );
  90.   }
  91. }
  93. ReactDOM.render(<Sider />, mountNode);

Menu导航菜单 - 图7

切换菜单类型

展示动态切换模式。

  1. import { Menu, Icon, Switch } from 'antd';
  3. const { SubMenu } = Menu;
  5. class Sider extends React.Component {
  6.   state = {
  7.     mode: 'inline',
  8.     theme: 'light',
  9.   };
  11.   changeMode = value => {
  12.     this.setState({
  13.       mode: value ? 'vertical' : 'inline',
  14.     });
  15.   };
  17.   changeTheme = value => {
  18.     this.setState({
  19.       theme: value ? 'dark' : 'light',
  20.     });
  21.   };
  23.   render() {
  24.     return (
  25.       <div>
  26.         <Switch onChange={this.changeMode} /> Change Mode
  27.         <span className="ant-divider" style={{ margin: '0 1em' }} />
  28.         <Switch onChange={this.changeTheme} /> Change Theme
  29.         <br />
  30.         <br />
  31.         <Menu
  32.           style={{ width: 256 }}
  33.           defaultSelectedKeys={['1']}
  34.           defaultOpenKeys={['sub1']}
  35.           mode={this.state.mode}
  36.           theme={this.state.theme}
  37.         >
  38.           <Menu.Item key="1">
  39.             <Icon type="mail" />
  40.             Navigation One
  41.           </Menu.Item>
  42.           <Menu.Item key="2">
  43.             <Icon type="calendar" />
  44.             Navigation Two
  45.           </Menu.Item>
  46.           <SubMenu
  47.             key="sub1"
  48.             title={
  49.               <span>
  50.                 <Icon type="appstore" />
  51.                 <span>Navigation Three</span>
  52.               </span>
  53.             }
  54.           >
  55.             <Menu.Item key="3">Option 3</Menu.Item>
  56.             <Menu.Item key="4">Option 4</Menu.Item>
  57.             <SubMenu key="sub1-2" title="Submenu">
  58.               <Menu.Item key="5">Option 5</Menu.Item>
  59.               <Menu.Item key="6">Option 6</Menu.Item>
  60.             </SubMenu>
  61.           </SubMenu>
  62.           <SubMenu
  63.             key="sub2"
  64.             title={
  65.               <span>
  66.                 <Icon type="setting" />
  67.                 <span>Navigation Four</span>
  68.               </span>
  69.             }
  70.           >
  71.             <Menu.Item key="7">Option 7</Menu.Item>
  72.             <Menu.Item key="8">Option 8</Menu.Item>
  73.             <Menu.Item key="9">Option 9</Menu.Item>
  74.             <Menu.Item key="10">Option 10</Menu.Item>
  75.           </SubMenu>
  76.         </Menu>
  77.       </div>
  78.     );
  79.   }
  80. }
  82. 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菜单类型，现在支持垂直、水平、和内嵌模式三种string: vertical horizontal inlinevertical
multiple是否允许多选booleanfalse
openKeys当前展开的 SubMenu 菜单项 key 数组string[]
selectable是否允许选中booleantrue
selectedKeys当前选中的菜单项 key 数组string[]
style根节点样式object
subMenuCloseDelay用户鼠标离开子菜单后关闭延时，单位：秒number0.1
subMenuOpenDelay用户鼠标进入子菜单后开启延时，单位：秒number0
theme主题颜色string: 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-3.16.0

More options in rc-menu

Menu.Item

参数说明类型默认值版本
disabled是否禁用booleanfalse
keyitem 的唯一标志string
title设置收缩时展示的悬浮标题string3.11.0

Menu.SubMenu

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

Menu.ItemGroup

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

Menu.Divider

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