Menu 导航菜单

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

何时使用

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

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

代码演示

顶部导航

水平的顶部导航菜单。

Menu导航菜单 - 图1

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Menu, Icon } from 'choerodon-ui';
  5. ​
  6. const SubMenu = Menu.SubMenu;
  7. const MenuItemGroup = Menu.ItemGroup;
  8. ​
  9. class App extends React.Component {
  10.   state = {
  11.     current: 'mail',
  12.   };
  13. ​
  14.   handleClick = e => {
  15.     console.log('click ', e);
  16.     this.setState({
  17.       current: e.key,
  18.     });
  19.   };
  20. ​
  21.   render() {
  22.     return (
  23.       <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
  24.         <Menu.Item key="mail">
  25.           <Icon type="mail_outline" />
  26.           Navigation One
  27.         </Menu.Item>
  28.         <Menu.Item key="app" disabled>
  29.           <Icon type="apps" />
  30.           Navigation Two
  31.         </Menu.Item>

内嵌菜单

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

Menu导航菜单 - 图2

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Menu, Icon } from 'choerodon-ui';
  5. ​
  6. const SubMenu = Menu.SubMenu;
  7. const MenuItemGroup = Menu.ItemGroup;
  8. ​
  9. class Sider extends React.Component {
  10.   handleClick = e => {
  11.     console.log('click ', e);
  12.   };
  13. ​
  14.   render() {
  15.     return (
  16.       <Menu
  17.         onClick={this.handleClick}
  18.         style={{ width: 256 }}
  19.         defaultSelectedKeys={['1']}
  20.         defaultOpenKeys={['sub1']}
  21.         mode="inline"
  22.       >
  23.         <SubMenu
  24.           key="sub1"
  25.           title={
  26.             <span>
  27.               <Icon type="mail_outline" />
  28.               <span>Navigation One</span>
  29.             </span>
  30.           }
  31.         >
  32.           <MenuItemGroup key="g1" title="Item 1">
  33.             <Menu.Item key="1">Option 1</Menu.Item>
  34.             <Menu.Item key="2">Option 2</Menu.Item>
  35.           </MenuItemGroup>
  36.           <MenuItemGroup key="g2" title="Item 2">
  37.             <Menu.Item key="3">Option 3</Menu.Item>
  38.             <Menu.Item key="4">Option 4</Menu.Item>
  39.           </MenuItemGroup>
  40.         </SubMenu>
  41.         <SubMenu
  42.           key="sub2"
  43.           title={
  44.             <span>
  45.               <Icon type="apps" />
  46.               <span>Navigation Two</span>

缩起内嵌菜单

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

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

Menu导航菜单 - 图3

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Menu, Icon, Button } from 'choerodon-ui';
  5. ​
  6. const SubMenu = Menu.SubMenu;
  7. ​
  8. class App extends React.Component {
  9.   state = {
  10.     collapsed: false,
  11.   };
  12. ​
  13.   toggleCollapsed = () => {
  14.     this.setState({
  15.       collapsed: !this.state.collapsed,
  16.     });
  17.   };
  18. ​
  19.   render() {
  20.     return (
  21.       <div style={{ width: 256 }}>
  22.         <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
  23.           <Icon type={this.state.collapsed ? 'folder_open' : 'folder'} />
  24.         </Button>
  25.         <Menu
  26.           defaultSelectedKeys={['1']}
  27.           defaultOpenKeys={['sub1']}
  28.           mode="inline"
  29.           inlineCollapsed={this.state.collapsed}
  30.         >
  31.           <Menu.Item key="1">
  32.             <Icon type="pie_chart_outlined" />
  33.             <span>Option 1</span>
  34.           </Menu.Item>
  35.           <Menu.Item key="2">
  36.             <Icon type="desktop_windows" />
  37.             <span>Option 2</span>
  38.           </Menu.Item>
  39.           <Menu.Item key="3">
  40.             <Icon type="inbox" />
  41.             <span>Option 3</span>
  42.           </Menu.Item>
  43.           <SubMenu
  44.             key="sub1"
  45.             title={
  46.               <span>
  47.                 <Icon type="mail_outline" />
  48.                 <span>Navigation One</span>
  49.               </span>

垂直菜单

子菜单是弹出的形式。

Menu导航菜单 - 图4

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Menu, Icon } from 'choerodon-ui';
  5. ​
  6. const SubMenu = Menu.SubMenu;
  7. const MenuItemGroup = Menu.ItemGroup;
  8. ​
  9. function handleClick(e) {
  10.   console.log('click', e);
  11. }
  12. ​
  13. ReactDOM.render(
  14.   <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
  15.     <SubMenu
  16.       key="sub1"
  17.       title={
  18.         <span>
  19.           <Icon type="mail_outline" />
  20.           <span>Navigation One</span>
  21.         </span>
  22.       }
  23.     >
  24.       <MenuItemGroup title="Item 1">
  25.         <Menu.Item key="1">Option 1</Menu.Item>
  26.         <Menu.Item key="2">Option 2</Menu.Item>
  27.       </MenuItemGroup>
  28.       <MenuItemGroup title="Iteom 2">
  29.         <Menu.Item key="3">Option 3</Menu.Item>
  30.         <Menu.Item key="4">Option 4</Menu.Item>
  31.       </MenuItemGroup>
  32.     </SubMenu>
  33.     <SubMenu
  34.       key="sub2"

主题

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

Menu导航菜单 - 图5

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Menu, Icon, Switch } from 'choerodon-ui';
  5. ​
  6. const SubMenu = Menu.SubMenu;
  7. ​
  8. class Sider extends React.Component {
  9.   state = {
  10.     theme: 'dark',
  11.     current: '1',
  12.   }
  13. ​
  14.   changeTheme = (value) => {
  15.     this.setState({
  16.       theme: value ? 'dark' : 'light',
  17.     });
  18.   }
  19. ​
  20.   handleClick = (e) => {
  21.     console.log('click ', e);
  22.     this.setState({
  23.       current: e.key,
  24.     });
  25.   }
  26. ​
  27.   render() {
  28.     return (
  29.       <div>
  30.         <Switch
  31.           checked={this.state.theme === 'dark'}
  32.           onChange={this.changeTheme}
  33.           checkedChildren="Dark"
  34.           unCheckedChildren="Light"
  35.         />
  36.         <br />
  37.         <br />
  38.         <Menu
  39.           theme={this.state.theme}
  40.           onClick={this.handleClick}
  41.           style={{ width: 256 }}
  42.           defaultOpenKeys={['sub1']}
  43.           selectedKeys={[this.state.current]}
  44.           mode="inline"

切换菜单类型

展示动态切换模式。

Menu导航菜单 - 图6

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Menu, Icon, Switch } from 'choerodon-ui';
  5. ​
  6. const { SubMenu } = Menu;
  7. ​
  8. class Sider extends React.Component {
  9.   state = {
  10.     mode: 'inline',
  11.   };
  12. ​
  13.   changeMode = value => {
  14.     this.setState({
  15.       mode: value ? 'vertical' : 'inline',
  16.     });
  17.   };
  18. ​
  19.   render() {
  20.     return (
  21.       <div>
  22.         <Switch onChange={this.changeMode} /> Change Mode
  23.         <span className="c7n-divider" style={{ margin: '0 1em' }} />
  24.         <br />
  25.         <br />
  26.         <Menu
  27.           style={{ width: 256 }}
  28.           defaultSelectedKeys={['1']}
  29.           defaultOpenKeys={['sub1']}
  30.           mode={this.state.mode}
  31.         >
  32.           <Menu.Item key="1">
  33.             <Icon type="mail_outline" />
  34.             Navigation One
  35.           </Menu.Item>
  36.           <Menu.Item key="2">
  37.             <Icon type="perm_contact_calendar" />
  38.             Navigation Two
  39.           </Menu.Item>
  40.           <SubMenu
  41.             key="sub1"
  42.             title={
  43.               <span>
  44.                 <Icon type="apps" />

只展开当前父级菜单

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

Menu导航菜单 - 图7

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Menu, Icon } from 'choerodon-ui';
  5. ​
  6. const SubMenu = Menu.SubMenu;
  7. ​
  8. class Sider extends React.Component {
  9.   // submenu keys of first level
  10.   rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
  11. ​
  12.   state = {
  13.     openKeys: ['sub1'],
  14.   };
  15. ​
  16.   onOpenChange = openKeys => {
  17.     const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
  18.     if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
  19.       this.setState({ openKeys });
  20.     } else {
  21.       this.setState({
  22.         openKeys: latestOpenKey ? [latestOpenKey] : [],
  23.       });
  24.     }
  25.   };
  26. ​
  27.   render() {
  28.     return (
  29.       <Menu
  30.         mode="inline"
  31.         openKeys={this.state.openKeys}
  32.         onOpenChange={this.onOpenChange}
  33.         style={{ width: 256 }}
  34.       >
  35.         <SubMenu
  36.           key="sub1"
  37.           title={
  38.             <span>
  39.               <Icon type="mail_outline" />
  40.               <span>Navigation One</span>
  41.             </span>
  42.           }

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

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