Menu导航菜单

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

何时使用

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

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

代码演示

Menu 导航菜单 - 图1

顶部导航

水平的顶部导航菜单。

  1. import { Menu, Icon } from 'choerodon-ui';
  3. const SubMenu = Menu.SubMenu;
  4. const MenuItemGroup = Menu.ItemGroup;
  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.           <Icon type="mail_outline" />
  23.           Navigation One
  24.         </Menu.Item>
  25.         <Menu.Item key="app" disabled>
  26.           <Icon type="apps" />
  27.           Navigation Two
  28.         </Menu.Item>
  29.         <SubMenu
  30.           title={
  31.             <span>
  32.               <Icon type="settings" />
  33.               Navigation Three - Submenu
  34.             </span>
  35.           }
  36.         >
  37.           <MenuItemGroup title="Item 1">
  38.             <Menu.Item key="setting:1">Option 1</Menu.Item>
  39.             <Menu.Item key="setting:2">Option 2</Menu.Item>
  40.           </MenuItemGroup>
  41.           <MenuItemGroup title="Item 2">
  42.             <Menu.Item key="setting:3">Option 3</Menu.Item>
  43.             <Menu.Item key="setting:4">Option 4</Menu.Item>
  44.           </MenuItemGroup>
  45.         </SubMenu>
  46.         <Menu.Item key="alipay">
  47.           <a
  48.             href="https://choerodon.github.io/choerodon-ui/"
  49.             target="_blank"
  50.             rel="noopener noreferrer"
  51.           >
  52.             Navigation Four - Link
  53.           </a>
  54.         </Menu.Item>
  55.       </Menu>
  56.     );
  57.   }
  58. }
  60. ReactDOM.render(<App />, mountNode);

Menu 导航菜单 - 图2

内嵌菜单

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

  1. import { Menu, Icon } from 'choerodon-ui';
  3. const SubMenu = Menu.SubMenu;
  4. const MenuItemGroup = Menu.ItemGroup;
  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.               <Icon type="mail_outline" />
  25.               <span>Navigation One</span>
  26.             </span>
  27.           }
  28.         >
  29.           <MenuItemGroup key="g1" title="Item 1">
  30.             <Menu.Item key="1">Option 1</Menu.Item>
  31.             <Menu.Item key="2">Option 2</Menu.Item>
  32.           </MenuItemGroup>
  33.           <MenuItemGroup key="g2" title="Item 2">
  34.             <Menu.Item key="3">Option 3</Menu.Item>
  35.             <Menu.Item key="4">Option 4</Menu.Item>
  36.           </MenuItemGroup>
  37.         </SubMenu>
  38.         <SubMenu
  39.           key="sub2"
  40.           title={
  41.             <span>
  42.               <Icon type="apps" />
  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.               <Icon type="settings" />
  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, Icon, Button } from 'choerodon-ui';
  3. const SubMenu = Menu.SubMenu;
  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 ? 'folder_open' : 'folder'} />
  21.         </Button>
  22.         <Menu
  23.           defaultSelectedKeys={['1']}
  24.           defaultOpenKeys={['sub1']}
  25.           mode="inline"
  26.           inlineCollapsed={this.state.collapsed}
  27.         >
  28.           <Menu.Item key="1">
  29.             <Icon type="pie_chart_outlined" />
  30.             <span>Option 1</span>
  31.           </Menu.Item>
  32.           <Menu.Item key="2">
  33.             <Icon type="desktop_windows" />
  34.             <span>Option 2</span>
  35.           </Menu.Item>
  36.           <Menu.Item key="3">
  37.             <Icon type="inbox" />
  38.             <span>Option 3</span>
  39.           </Menu.Item>
  40.           <SubMenu
  41.             key="sub1"
  42.             title={
  43.               <span>
  44.                 <Icon type="mail_outline" />
  45.                 <span>Navigation One</span>
  46.               </span>
  47.             }
  48.           >
  49.             <Menu.Item key="5">Option 5</Menu.Item>
  50.             <Menu.Item key="6">Option 6</Menu.Item>
  51.             <Menu.Item key="7">Option 7</Menu.Item>
  52.             <Menu.Item key="8">Option 8</Menu.Item>
  53.           </SubMenu>
  54.           <SubMenu
  55.             key="sub2"
  56.             title={
  57.               <span>
  58.                 <Icon type="apps" />
  59.                 <span>Navigation Two</span>
  60.               </span>
  61.             }
  62.           >
  63.             <Menu.Item key="9">Option 9</Menu.Item>
  64.             <Menu.Item key="10">Option 10</Menu.Item>
  65.             <SubMenu key="sub3" title="Submenu">
  66.               <Menu.Item key="11">Option 11</Menu.Item>
  67.               <Menu.Item key="12">Option 12</Menu.Item>
  68.             </SubMenu>
  69.           </SubMenu>
  70.         </Menu>
  71.       </div>
  72.     );
  73.   }
  74. }
  76. ReactDOM.render(<App />, mountNode);

Menu 导航菜单 - 图4

垂直菜单

子菜单是弹出的形式。

  1. import { Menu, Icon } from 'choerodon-ui';
  3. const SubMenu = Menu.SubMenu;
  4. const MenuItemGroup = Menu.ItemGroup;
  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.           <Icon type="mail_outline" />
  17.           <span>Navigation One</span>
  18.         </span>
  19.       }
  20.     >
  21.       <MenuItemGroup title="Item 1">
  22.         <Menu.Item key="1">Option 1</Menu.Item>
  23.         <Menu.Item key="2">Option 2</Menu.Item>
  24.       </MenuItemGroup>
  25.       <MenuItemGroup title="Iteom 2">
  26.         <Menu.Item key="3">Option 3</Menu.Item>
  27.         <Menu.Item key="4">Option 4</Menu.Item>
  28.       </MenuItemGroup>
  29.     </SubMenu>
  30.     <SubMenu
  31.       key="sub2"
  32.       title={
  33.         <span>
  34.           <Icon type="apps" />
  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.           <Icon type="settings" />
  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 导航菜单 - 图5

主题

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

  1. import { Menu, Icon, Switch } from 'choerodon-ui';
  3. const SubMenu = Menu.SubMenu;
  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 key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
  44.             <Menu.Item key="1">Option 1</Menu.Item>
  45.             <Menu.Item key="2">Option 2</Menu.Item>
  46.             <Menu.Item key="3">Option 3</Menu.Item>
  47.             <Menu.Item key="4">Option 4</Menu.Item>
  48.           </SubMenu>
  49.           <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigtion Two</span></span>}>
  50.             <Menu.Item key="5">Option 5</Menu.Item>
  51.             <Menu.Item key="6">Option 6</Menu.Item>
  52.             <SubMenu key="sub3" title="Submenu">
  53.               <Menu.Item key="7">Option 7</Menu.Item>
  54.               <Menu.Item key="8">Option 8</Menu.Item>
  55.             </SubMenu>
  56.           </SubMenu>
  57.           <SubMenu key="sub4" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
  58.             <Menu.Item key="9">Option 9</Menu.Item>
  59.             <Menu.Item key="10">Option 10</Menu.Item>
  60.             <Menu.Item key="11">Option 11</Menu.Item>
  61.             <Menu.Item key="12">Option 12</Menu.Item>
  62.           </SubMenu>
  63.         </Menu>
  64.       </div>
  65.     );
  66.   }
  67. }
  69. ReactDOM.render(<Sider />, mountNode);

Menu 导航菜单 - 图6

切换菜单类型

展示动态切换模式。

  1. import { Menu, Icon, Switch } from 'choerodon-ui';
  3. const { SubMenu } = Menu;
  5. class Sider extends React.Component {
  6.   state = {
  7.     mode: 'inline',
  8.   };
  10.   changeMode = value => {
  11.     this.setState({
  12.       mode: value ? 'vertical' : 'inline',
  13.     });
  14.   };
  16.   render() {
  17.     return (
  18.       <div>
  19.         <Switch onChange={this.changeMode} /> Change Mode
  20.         <span className="c7n-divider" style={{ margin: '0 1em' }} />
  21.         <br />
  22.         <br />
  23.         <Menu
  24.           style={{ width: 256 }}
  25.           defaultSelectedKeys={['1']}
  26.           defaultOpenKeys={['sub1']}
  27.           mode={this.state.mode}
  28.         >
  29.           <Menu.Item key="1">
  30.             <Icon type="mail_outline" />
  31.             Navigation One
  32.           </Menu.Item>
  33.           <Menu.Item key="2">
  34.             <Icon type="perm_contact_calendar" />
  35.             Navigation Two
  36.           </Menu.Item>
  37.           <SubMenu
  38.             key="sub1"
  39.             title={
  40.               <span>
  41.                 <Icon type="apps" />
  42.                 <span>Navigation Three</span>
  43.               </span>
  44.             }
  45.           >
  46.             <Menu.Item key="3">Option 3</Menu.Item>
  47.             <Menu.Item key="4">Option 4</Menu.Item>
  48.             <SubMenu key="sub1-2" title="Submenu">
  49.               <Menu.Item key="5">Option 5</Menu.Item>
  50.               <Menu.Item key="6">Option 6</Menu.Item>
  51.             </SubMenu>
  52.           </SubMenu>
  53.           <SubMenu
  54.             key="sub2"
  55.             title={
  56.               <span>
  57.                 <Icon type="settings" />
  58.                 <span>Navigation Four</span>
  59.               </span>
  60.             }
  61.           >
  62.             <Menu.Item key="7">Option 7</Menu.Item>
  63.             <Menu.Item key="8">Option 8</Menu.Item>
  64.             <Menu.Item key="9">Option 9</Menu.Item>
  65.             <Menu.Item key="10">Option 10</Menu.Item>
  66.           </SubMenu>
  67.         </Menu>
  68.       </div>
  69.     );
  70.   }
  71. }
  73. ReactDOM.render(<Sider />, mountNode);

Menu 导航菜单 - 图7

只展开当前父级菜单

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

  1. import { Menu, Icon } from 'choerodon-ui';
  3. const SubMenu = Menu.SubMenu;
  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_outline" />
  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="apps" />
  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="settings" />
  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);

API

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

Menu

参数说明类型默认值
defaultOpenKeys初始展开的 SubMenu 菜单项 key 数组
defaultSelectedKeys初始选中的菜单项 key 数组string[]
forceSubMenuRender在子菜单展示之前就渲染进 DOMbooleanfalse
inlineCollapsedinline 时菜单是否收起状态boolean-
inlineIndentinline 模式的菜单缩进宽度number24
mode菜单类型，现在支持垂直、水平、和内嵌模式三种string: vertical vertical-right 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 })-
onDeselect取消选中时调用，仅在 multiple 生效function({ item, key, selectedKeys })-
onOpenChangeSubMenu 展开/关闭的回调function(openKeys: string[])noop
onSelect被选中时调用function({ item, key, selectedKeys })无

More options in rc-menu

Menu.Item

参数说明类型默认值
disabled是否禁用booleanfalse
keyitem 的唯一标志string

Menu.SubMenu

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

Menu.ItemGroup

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

Menu.Divider

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