Menu 导航菜单

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

何时使用

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

<Menu>
  <MenuItem>菜单项</MenuItem>
  <SubMenu title="子菜单">
    <MenuItem>子菜单项</MenuItem>
  </SubMenu>
</Menu>

API

参数 说明 类型 默认值
mode 菜单类型 enum: 'vertical', 'horizontal', 'inline' vertical
selectedKeys 当前选中的菜单项 key 数组
defaultSelectedKeys 初始选中的菜单项 key 数组
openKeys 当前展开的菜单项 key 数组
defaultOpenKeys 初始展开的菜单项 key 数组
onSelect 被选中时调用,参数 {item, key, selectedKeys} 对象 function
onDeselect 取消选中时调用,参数 {item, key, selectedKeys} 对象,仅在 multiple 生效 function
onClick 点击 menuitem 调用此函数,参数为 {item, key} function
style 根节点样式 object
参数 说明 类型 默认值
disabled 是否禁用 Boolean false
key item 的唯一标志 String
参数 说明 类型 默认值
title 子菜单项值 String or React.Element
children (MenuItem or SubMenu)[] 子菜单的菜单项

组件演示

var Menu = antd.Menu;
var SubMenu = Menu.SubMenu;

var App = React.createClass({
  getInitialState() {
    return {
      current: 'mail'
    }
  },
  handleClick(e) {
    console.log('click ', e);
    this.setState({
      current: e.key
    });
  },
  render() {
    return <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
    <Menu.Item key="mail">
      <i className="anticon anticon-mail"></i>导航一
    </Menu.Item>
    <Menu.Item key="app">
      <i className="anticon anticon-appstore"></i>导航二
    </Menu.Item>
    <SubMenu title={<span><i className="anticon anticon-setting"></i>导航 - 子菜单</span>}>
      <Menu.Item key="setting:1">选项1</Menu.Item>
      <Menu.Item key="setting:2">选项2</Menu.Item>
      <Menu.Item key="setting:3">选项3</Menu.Item>
      <Menu.Item key="setting:4">选项4</Menu.Item>
    </SubMenu>
    <Menu.Item key="alipay">
      <a href="http://www.alipay.com/" target="_blank">导航四 - 链接</a>
    </Menu.Item>
  </Menu>
  }
});

React.render(<App />, document.getElementById('components-menu-demo-horizontal'));

水平的顶部导航菜单。

var Menu = antd.Menu;
var SubMenu = Menu.SubMenu;

var Sider = React.createClass({
  getInitialState() {
    return {
      current: '1'
    }
  },
  handleClick(e) {
    console.log('click ', e);
    this.setState({
      current: e.key
    });
  },
  render() {
    return <Menu onClick={this.handleClick}
                 style={{width:240}}
                 defaultOpenKeys={['sub1']}
                 selectedKeys={[this.state.current]}
                 mode="inline">
      <SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
        <Menu.Item key="1">选项1</Menu.Item>
        <Menu.Item key="2">选项2</Menu.Item>
        <Menu.Item key="3">选项3</Menu.Item>
        <Menu.Item key="4">选项4</Menu.Item>
      </SubMenu>
      <SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
        <Menu.Item key="5">选项5</Menu.Item>
        <Menu.Item key="6">选项6</Menu.Item>
        <SubMenu key="sub3" title="三级导航">
          <Menu.Item key="7">选项7</Menu.Item>
          <Menu.Item key="8">选项8</Menu.Item>
        </SubMenu>
      </SubMenu>
      <SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
        <Menu.Item key="9">选项9</Menu.Item>
        <Menu.Item key="10">选项10</Menu.Item>
        <Menu.Item key="11">选项11</Menu.Item>
        <Menu.Item key="12">选项12</Menu.Item>
      </SubMenu>
    </Menu>;
  }
});
React.render(<Sider />, document.getElementById('components-menu-demo-sider'));

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

var Menu = antd.Menu;
var SubMenu = Menu.SubMenu;

var Sider = React.createClass({
  getInitialState() {
    return {
      current: '1',
      openKeys: []
    }
  },
  handleClick(e) {
    console.log('click ', e);
    this.setState({
      current: e.key,
      openKeys: e.keyPath.slice(1)
    });
  },
  onToggle(info){
    this.setState({
      openKeys: info.openKeys
    });
  },
  render() {
    return <Menu onClick={this.handleClick}
                 style={{width:240}}
                 openKeys={this.state.openKeys}
                 onOpen={this.onToggle}
                 onClose={this.onToggle}
                 selectedKeys={[this.state.current]}
                 mode="inline">
      <SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
        <Menu.Item key="1">选项1</Menu.Item>
        <Menu.Item key="2">选项2</Menu.Item>
        <Menu.Item key="3">选项3</Menu.Item>
        <Menu.Item key="4">选项4</Menu.Item>
      </SubMenu>
      <SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
        <Menu.Item key="5">选项5</Menu.Item>
        <Menu.Item key="6">选项6</Menu.Item>
        <SubMenu key="sub3" title="三级导航">
          <Menu.Item key="7">选项7</Menu.Item>
          <Menu.Item key="8">选项8</Menu.Item>
        </SubMenu>
      </SubMenu>
      <SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
        <Menu.Item key="9">选项9</Menu.Item>
        <Menu.Item key="10">选项10</Menu.Item>
        <Menu.Item key="11">选项11</Menu.Item>
        <Menu.Item key="12">选项12</Menu.Item>
      </SubMenu>
    </Menu>;
  }
});
React.render(<Sider />, document.getElementById('components-menu-demo-sider-current'));

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

var Menu = antd.Menu;
var MenuItem = Menu.Item;
var SubMenu = Menu.SubMenu;

function handleClick(e) {
  console.log('click', e);
}

React.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
  <SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
    <MenuItem key="1">选项1</MenuItem>
    <MenuItem key="2">选项2</MenuItem>
    <MenuItem key="3">选项3</MenuItem>
    <MenuItem key="4">选项4</MenuItem>
  </SubMenu>
  <SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
    <MenuItem key="5">选项5</MenuItem>
    <MenuItem key="6">选项6</MenuItem>
    <SubMenu key="sub3" title="三级导航">
      <MenuItem key="7">选项7</MenuItem>
      <MenuItem key="8">选项8</MenuItem>
    </SubMenu>
  </SubMenu>
  <SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
    <MenuItem key="9">选项9</MenuItem>
    <MenuItem key="10">选项10</MenuItem>
    <MenuItem key="11">选项11</MenuItem>
    <MenuItem key="12">选项12</MenuItem>
  </SubMenu>
</Menu>
, document.getElementById('components-menu-demo-vertical'));

子菜单是弹出的形式。