Menu导航菜单

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

何时使用

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

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

代码演示

Menu导航菜单 - 图1

顶部导航

水平的顶部导航菜单。

  1. import { Menu } from 'antd';
  2. import {
  3. MailOutlined,
  4. AppstoreOutlined,
  5. SettingOutlined,
  6. } from '@ant-design/icons';
  7. const { SubMenu } = Menu;
  8. class App extends React.Component {
  9. state = {
  10. current: 'mail',
  11. };
  12. handleClick = e => {
  13. console.log('click ', e);
  14. this.setState({
  15. current: e.key,
  16. });
  17. };
  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. }
  55. ReactDOM.render(<App />, mountNode);

Menu导航菜单 - 图2

内嵌菜单

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

  1. import { Menu } from 'antd';
  2. import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
  3. const { SubMenu } = Menu;
  4. class Sider extends React.Component {
  5. handleClick = e => {
  6. console.log('click ', e);
  7. };
  8. render() {
  9. return (
  10. <Menu
  11. onClick={this.handleClick}
  12. style={{ width: 256 }}
  13. defaultSelectedKeys={['1']}
  14. defaultOpenKeys={['sub1']}
  15. mode="inline"
  16. >
  17. <SubMenu
  18. key="sub1"
  19. title={
  20. <span>
  21. <MailOutlined />
  22. <span>Navigation One</span>
  23. </span>
  24. }
  25. >
  26. <Menu.ItemGroup key="g1" title="Item 1">
  27. <Menu.Item key="1">Option 1</Menu.Item>
  28. <Menu.Item key="2">Option 2</Menu.Item>
  29. </Menu.ItemGroup>
  30. <Menu.ItemGroup key="g2" title="Item 2">
  31. <Menu.Item key="3">Option 3</Menu.Item>
  32. <Menu.Item key="4">Option 4</Menu.Item>
  33. </Menu.ItemGroup>
  34. </SubMenu>
  35. <SubMenu
  36. key="sub2"
  37. title={
  38. <span>
  39. <AppstoreOutlined />
  40. <span>Navigation Two</span>
  41. </span>
  42. }
  43. >
  44. <Menu.Item key="5">Option 5</Menu.Item>
  45. <Menu.Item key="6">Option 6</Menu.Item>
  46. <SubMenu key="sub3" title="Submenu">
  47. <Menu.Item key="7">Option 7</Menu.Item>
  48. <Menu.Item key="8">Option 8</Menu.Item>
  49. </SubMenu>
  50. </SubMenu>
  51. <SubMenu
  52. key="sub4"
  53. title={
  54. <span>
  55. <SettingOutlined />
  56. <span>Navigation Three</span>
  57. </span>
  58. }
  59. >
  60. <Menu.Item key="9">Option 9</Menu.Item>
  61. <Menu.Item key="10">Option 10</Menu.Item>
  62. <Menu.Item key="11">Option 11</Menu.Item>
  63. <Menu.Item key="12">Option 12</Menu.Item>
  64. </SubMenu>
  65. </Menu>
  66. );
  67. }
  68. }
  69. 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';
  11. const { SubMenu } = Menu;
  12. class App extends React.Component {
  13. state = {
  14. collapsed: false,
  15. };
  16. toggleCollapsed = () => {
  17. this.setState({
  18. collapsed: !this.state.collapsed,
  19. });
  20. };
  21. render() {
  22. return (
  23. <div style={{ width: 256 }}>
  24. <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
  25. {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
  26. </Button>
  27. <Menu
  28. defaultSelectedKeys={['1']}
  29. defaultOpenKeys={['sub1']}
  30. mode="inline"
  31. theme="dark"
  32. inlineCollapsed={this.state.collapsed}
  33. >
  34. <Menu.Item key="1">
  35. <PieChartOutlined />
  36. <span>Option 1</span>
  37. </Menu.Item>
  38. <Menu.Item key="2">
  39. <DesktopOutlined />
  40. <span>Option 2</span>
  41. </Menu.Item>
  42. <Menu.Item key="3">
  43. <ContainerOutlined />
  44. <span>Option 3</span>
  45. </Menu.Item>
  46. <SubMenu
  47. key="sub1"
  48. title={
  49. <span>
  50. <MailOutlined />
  51. <span>Navigation One</span>
  52. </span>
  53. }
  54. >
  55. <Menu.Item key="5">Option 5</Menu.Item>
  56. <Menu.Item key="6">Option 6</Menu.Item>
  57. <Menu.Item key="7">Option 7</Menu.Item>
  58. <Menu.Item key="8">Option 8</Menu.Item>
  59. </SubMenu>
  60. <SubMenu
  61. key="sub2"
  62. title={
  63. <span>
  64. <AppstoreOutlined />
  65. <span>Navigation Two</span>
  66. </span>
  67. }
  68. >
  69. <Menu.Item key="9">Option 9</Menu.Item>
  70. <Menu.Item key="10">Option 10</Menu.Item>
  71. <SubMenu key="sub3" title="Submenu">
  72. <Menu.Item key="11">Option 11</Menu.Item>
  73. <Menu.Item key="12">Option 12</Menu.Item>
  74. </SubMenu>
  75. </SubMenu>
  76. </Menu>
  77. </div>
  78. );
  79. }
  80. }
  81. ReactDOM.render(<App />, mountNode);

Menu导航菜单 - 图4

只展开当前父级菜单

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

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

Menu导航菜单 - 图5

垂直菜单

子菜单是弹出的形式。

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

Menu导航菜单 - 图6

主题

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

  1. import { Menu, Switch } from 'antd';
  2. import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
  3. const { SubMenu } = Menu;
  4. class Sider extends React.Component {
  5. state = {
  6. theme: 'dark',
  7. current: '1',
  8. };
  9. changeTheme = value => {
  10. this.setState({
  11. theme: value ? 'dark' : 'light',
  12. });
  13. };
  14. handleClick = e => {
  15. console.log('click ', e);
  16. this.setState({
  17. current: e.key,
  18. });
  19. };
  20. render() {
  21. return (
  22. <div>
  23. <Switch
  24. checked={this.state.theme === 'dark'}
  25. onChange={this.changeTheme}
  26. checkedChildren="Dark"
  27. unCheckedChildren="Light"
  28. />
  29. <br />
  30. <br />
  31. <Menu
  32. theme={this.state.theme}
  33. onClick={this.handleClick}
  34. style={{ width: 256 }}
  35. defaultOpenKeys={['sub1']}
  36. selectedKeys={[this.state.current]}
  37. mode="inline"
  38. >
  39. <SubMenu
  40. key="sub1"
  41. title={
  42. <span>
  43. <MailOutlined />
  44. <span>Navigation One</span>
  45. </span>
  46. }
  47. >
  48. <Menu.Item key="1">Option 1</Menu.Item>
  49. <Menu.Item key="2">Option 2</Menu.Item>
  50. <Menu.Item key="3">Option 3</Menu.Item>
  51. <Menu.Item key="4">Option 4</Menu.Item>
  52. </SubMenu>
  53. <SubMenu
  54. key="sub2"
  55. title={
  56. <span>
  57. <AppstoreOutlined />
  58. <span>Navigation Two</span>
  59. </span>
  60. }
  61. >
  62. <Menu.Item key="5">Option 5</Menu.Item>
  63. <Menu.Item key="6">Option 6</Menu.Item>
  64. <SubMenu key="sub3" title="Submenu">
  65. <Menu.Item key="7">Option 7</Menu.Item>
  66. <Menu.Item key="8">Option 8</Menu.Item>
  67. </SubMenu>
  68. </SubMenu>
  69. <SubMenu
  70. key="sub4"
  71. title={
  72. <span>
  73. <SettingOutlined />
  74. <span>Navigation Three</span>
  75. </span>
  76. }
  77. >
  78. <Menu.Item key="9">Option 9</Menu.Item>
  79. <Menu.Item key="10">Option 10</Menu.Item>
  80. <Menu.Item key="11">Option 11</Menu.Item>
  81. <Menu.Item key="12">Option 12</Menu.Item>
  82. </SubMenu>
  83. </Menu>
  84. </div>
  85. );
  86. }
  87. }
  88. 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';
  8. const { SubMenu } = Menu;
  9. class Sider extends React.Component {
  10. state = {
  11. mode: 'inline',
  12. theme: 'light',
  13. };
  14. changeMode = value => {
  15. this.setState({
  16. mode: value ? 'vertical' : 'inline',
  17. });
  18. };
  19. changeTheme = value => {
  20. this.setState({
  21. theme: value ? 'dark' : 'light',
  22. });
  23. };
  24. render() {
  25. return (
  26. <div>
  27. <Switch onChange={this.changeMode} /> Change Mode
  28. <span className="ant-divider" style={{ margin: '0 1em' }} />
  29. <Switch onChange={this.changeTheme} /> Change Style
  30. <br />
  31. <br />
  32. <Menu
  33. style={{ width: 256 }}
  34. defaultSelectedKeys={['1']}
  35. defaultOpenKeys={['sub1']}
  36. mode={this.state.mode}
  37. theme={this.state.theme}
  38. >
  39. <Menu.Item key="1">
  40. <MailOutlined />
  41. Navigation One
  42. </Menu.Item>
  43. <Menu.Item key="2">
  44. <CalendarOutlined />
  45. Navigation Two
  46. </Menu.Item>
  47. <SubMenu
  48. key="sub1"
  49. title={
  50. <span>
  51. <AppstoreOutlined />
  52. <span>Navigation Three</span>
  53. </span>
  54. }
  55. >
  56. <Menu.Item key="3">Option 3</Menu.Item>
  57. <Menu.Item key="4">Option 4</Menu.Item>
  58. <SubMenu key="sub1-2" title="Submenu">
  59. <Menu.Item key="5">Option 5</Menu.Item>
  60. <Menu.Item key="6">Option 6</Menu.Item>
  61. </SubMenu>
  62. </SubMenu>
  63. <SubMenu
  64. key="sub2"
  65. title={
  66. <span>
  67. <SettingOutlined />
  68. <span>Navigation Four</span>
  69. </span>
  70. }
  71. >
  72. <Menu.Item key="7">Option 7</Menu.Item>
  73. <Menu.Item key="8">Option 8</Menu.Item>
  74. <Menu.Item key="9">Option 9</Menu.Item>
  75. <Menu.Item key="10">Option 10</Menu.Item>
  76. </SubMenu>
  77. </Menu>
  78. </div>
  79. );
  80. }
  81. }
  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菜单类型,现在支持垂直、水平、和内嵌模式三种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

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