ant-design/components/menu/demo/nav.md

导航菜单

• order: 0

基本使用。

---

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

function handleClick(key) {
  console.log('selected ' + key);
}

var align={
  points:['lt','lb']
};

React.render(<Menu onClick={handleClick} horizontal>
  <SubMenu align={align} title={<span><i className="anticon anticon-apple"></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 align={align} title={<span><i className="anticon anticon-apple"></i><span>导航二</span></span>}>
    <MenuItem key="5">选项5</MenuItem>
    <MenuItem key="6">选项6</MenuItem>
     <SubMenu title={<span><i className="anticon anticon-apple"></i><span>三级导航</span></span>}>
        <MenuItem key="7">选项7</MenuItem>
        <MenuItem key="8">选项8</MenuItem>
      </SubMenu>
  </SubMenu>
  <SubMenu align={align} title={<span><i className="anticon anticon-apple"></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-nav'));