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'));
Ant Design