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({ current: e.key });
  14.   };
  16.   render() {
  17.     const { current } = this.state;
  18.     return (
  19.       <Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
  20.         <Menu.Item key="mail" icon={<MailOutlined />}>
  21.           Navigation One
  22.         </Menu.Item>
  23.         <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
  24.           Navigation Two
  25.         </Menu.Item>
  26.         <SubMenu key="SubMenu" icon={<SettingOutlined />} title="Navigation Three - Submenu">
  27.           <Menu.ItemGroup title="Item 1">
  28.             <Menu.Item key="setting:1">Option 1</Menu.Item>
  29.             <Menu.Item key="setting:2">Option 2</Menu.Item>
  30.           </Menu.ItemGroup>
  31.           <Menu.ItemGroup title="Item 2">
  32.             <Menu.Item key="setting:3">Option 3</Menu.Item>
  33.             <Menu.Item key="setting:4">Option 4</Menu.Item>
  34.           </Menu.ItemGroup>
  35.         </SubMenu>
  36.         <Menu.Item key="alipay">
  37.           <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
  38.             Navigation Four - Link
  39.           </a>
  40.         </Menu.Item>
  41.       </Menu>
  42.     );
  43.   }
  44. }
  46. 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 key="sub1" icon={<MailOutlined />} title="Navigation One">
  21.           <Menu.ItemGroup key="g1" 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 key="g2" title="Item 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 key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
  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.     );
  46.   }
  47. }
  49. 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. // submenu keys of first level
  7. const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
  9. const Sider = () => {
  10.   const [openKeys, setOpenKeys] = React.useState(['sub1']);
  12.   const onOpenChange = keys => {
  13.     const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
  14.     if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
  15.       setOpenKeys(keys);
  16.     } else {
  17.       setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
  18.     }
  19.   };
  21.   return (
  22.     <Menu mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} style={{ width: 256 }}>
  23.       <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
  24.         <Menu.Item key="1">Option 1</Menu.Item>
  25.         <Menu.Item key="2">Option 2</Menu.Item>
  26.         <Menu.Item key="3">Option 3</Menu.Item>
  27.         <Menu.Item key="4">Option 4</Menu.Item>
  28.       </SubMenu>
  29.       <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
  30.         <Menu.Item key="5">Option 5</Menu.Item>
  31.         <Menu.Item key="6">Option 6</Menu.Item>
  32.         <SubMenu key="sub3" title="Submenu">
  33.           <Menu.Item key="7">Option 7</Menu.Item>
  34.           <Menu.Item key="8">Option 8</Menu.Item>
  35.         </SubMenu>
  36.       </SubMenu>
  37.       <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
  38.         <Menu.Item key="9">Option 9</Menu.Item>
  39.         <Menu.Item key="10">Option 10</Menu.Item>
  40.         <Menu.Item key="11">Option 11</Menu.Item>
  41.         <Menu.Item key="12">Option 12</Menu.Item>
  42.       </SubMenu>
  43.     </Menu>
  44.   );
  45. };
  47. 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 key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
  23.       <Menu.Item key="5">Option 5</Menu.Item>
  24.       <Menu.Item key="6">Option 6</Menu.Item>
  25.       <SubMenu key="sub3" title="Submenu">
  26.         <Menu.Item key="7">Option 7</Menu.Item>
  27.         <Menu.Item key="8">Option 8</Menu.Item>
  28.       </SubMenu>
  29.     </SubMenu>
  30.     <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
  31.       <Menu.Item key="9">Option 9</Menu.Item>
  32.       <Menu.Item key="10">Option 10</Menu.Item>
  33.       <Menu.Item key="11">Option 11</Menu.Item>
  34.       <Menu.Item key="12">Option 12</Menu.Item>
  35.     </SubMenu>
  36.   </Menu>,
  37.   mountNode,
  38. );

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">Option 4</Menu.Item>
  49.           </SubMenu>
  50.           <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
  51.             <Menu.Item key="5">Option 5</Menu.Item>
  52.             <Menu.Item key="6">Option 6</Menu.Item>
  53.             <SubMenu key="sub3" title="Submenu">
  54.               <Menu.Item key="7">Option 7</Menu.Item>
  55.               <Menu.Item key="8">Option 8</Menu.Item>
  56.             </SubMenu>
  57.           </SubMenu>
  58.           <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
  59.             <Menu.Item key="9">Option 9</Menu.Item>
  60.             <Menu.Item key="10">Option 10</Menu.Item>
  61.             <Menu.Item key="11">Option 11</Menu.Item>
  62.             <Menu.Item key="12">Option 12</Menu.Item>
  63.           </SubMenu>
  64.         </Menu>
  65.       </>
  66.     );
  67.   }
  68. }
  70. 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. const Demo = () => {
  13.   const [mode, setMode] = React.useState('inline');
  14.   const [theme, setTheme] = React.useState('light');
  16.   const changeMode = value => {
  17.     setMode(value ? 'vertical' : 'inline');
  18.   };
  20.   const changeTheme = value => {
  21.     setTheme(value ? 'dark' : 'light');
  22.   };
  24.   return (
  25.     <>
  26.       <Switch onChange={changeMode} /> Change Mode
  27.       <Divider type="vertical" />
  28.       <Switch onChange={changeTheme} /> Change Style
  29.       <br />
  30.       <br />
  31.       <Menu
  32.         style={{ width: 256 }}
  33.         defaultSelectedKeys={['1']}
  34.         defaultOpenKeys={['sub1']}
  35.         mode={mode}
  36.         theme={theme}
  37.       >
  38.         <Menu.Item key="1" icon={<MailOutlined />}>
  39.           Navigation One
  40.         </Menu.Item>
  41.         <Menu.Item key="2" icon={<CalendarOutlined />}>
  42.           Navigation Two
  43.         </Menu.Item>
  44.         <SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
  45.           <Menu.Item key="3">Option 3</Menu.Item>
  46.           <Menu.Item key="4">Option 4</Menu.Item>
  47.           <SubMenu key="sub1-2" title="Submenu">
  48.             <Menu.Item key="5">Option 5</Menu.Item>
  49.             <Menu.Item key="6">Option 6</Menu.Item>
  50.           </SubMenu>
  51.         </SubMenu>
  52.         <SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
  53.           <Menu.Item key="7">Option 7</Menu.Item>
  54.           <Menu.Item key="8">Option 8</Menu.Item>
  55.           <Menu.Item key="9">Option 9</Menu.Item>
  56.           <Menu.Item key="10">Option 10</Menu.Item>
  57.         </SubMenu>
  58.         <Menu.Item key="link" icon={<LinkOutlined />}>
  59.           <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
  60.             Ant Design
  61.           </a>
  62.         </Menu.Item>
  63.       </Menu>
  64.     </>
  65.   );
  66. };
  68. ReactDOM.render(<Demo />, 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[]-
expandIcon自定义展开图标ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode-4.9.0
forceSubMenuRender在子菜单展示之前就渲染进 DOMbooleanfalse
inlineCollapsedinline 时菜单是否收起状态boolean-
inlineIndentinline 模式的菜单缩进宽度number24
mode菜单类型，现在支持垂直、水平、和内嵌模式三种vertical | horizontal | inlinevertical
multiple是否允许多选booleanfalse
openKeys当前展开的 SubMenu 菜单项 key 数组string[]-
overflowedIndicator自定义 Menu 折叠时的图标ReactNode-
selectable是否允许选中booleantrue
selectedKeys当前选中的菜单项 key 数组string[]-
style根节点样式CSSProperties-
subMenuCloseDelay用户鼠标离开子菜单后关闭延时，单位：秒number0.1
subMenuOpenDelay用户鼠标进入子菜单后开启延时，单位：秒number0
theme主题颜色light | darklight
triggerSubMenuActionSubMenu 展开/关闭的触发行为hover | clickhover
onClick点击 MenuItem 调用此函数function({ item, key, keyPath, domEvent })-
onDeselect取消选中时调用，仅在 multiple 生效function({ item, key, keyPath, selectedKeys, domEvent })-
onOpenChangeSubMenu 展开/关闭的回调function(openKeys: string[])-
onSelect被选中时调用function({ item, key, keyPath, selectedKeys, domEvent })-  

更多属性查看 rc-menu

Menu.Item

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

注意：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

参数说明类型默认值版本
children子菜单的菜单项Array<MenuItem | SubMenu>-
disabled是否禁用booleanfalse
icon菜单图标ReactNode-4.2.0
key唯一标志string-
popupClassName子菜单样式，mode=”inline” 时无效string-
popupOffset子菜单偏移量，mode=”inline” 时无效[number, number]-
title子菜单项值ReactNode-
onTitleClick点击子菜单标题function({ key, domEvent })-

Menu.ItemGroup

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

Menu.Divider

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